import _ from '_';
import ko from 'ko';

import { Magics } from 'Common/Enums';
import { settingsSaveHelperSimpleFunction, trim } from 'Common/Utils';
import { i18n, trigger as translatorTrigger } from 'Common/Translator';

import Remote from 'Remote/Admin/Ajax';

import { settingsGet } from 'Storage/Settings';

class BrandingAdminSettings {
	constructor() {
		this.title = ko.observable(settingsGet('Title')).idleTrigger();
		this.loadingDesc = ko.observable(settingsGet('LoadingDescription')).idleTrigger();
		this.faviconUrl = ko.observable(settingsGet('FaviconUrl')).idleTrigger();
		this.loginLogo = ko.observable(settingsGet('LoginLogo') || '').idleTrigger();
		this.loginBackground = ko.observable(settingsGet('LoginBackground') || '').idleTrigger();
		this.userLogo = ko.observable(settingsGet('UserLogo') || '').idleTrigger();
		this.userLogoMessage = ko.observable(settingsGet('UserLogoMessage') || '').idleTrigger();
		this.userIframeMessage = ko.observable(settingsGet('UserIframeMessage') || '').idleTrigger();
		this.userLogoTitle = ko.observable(settingsGet('UserLogoTitle') || '').idleTrigger();
		this.loginDescription = ko.observable(settingsGet('LoginDescription')).idleTrigger();
		this.loginCss = ko.observable(settingsGet('LoginCss')).idleTrigger();
		this.userCss = ko.observable(settingsGet('UserCss')).idleTrigger();
		this.welcomePageUrl = ko.observable(settingsGet('WelcomePageUrl')).idleTrigger();
		this.welcomePageDisplay = ko.observable(settingsGet('WelcomePageDisplay')).idleTrigger();
		this.welcomePageDisplay.options = ko.computed(() => {
			translatorTrigger();
			return [
				{ optValue: 'none', optText: i18n('TAB_BRANDING/OPTION_WELCOME_PAGE_DISPLAY_NONE') },
				{ optValue: 'once', optText: i18n('TAB_BRANDING/OPTION_WELCOME_PAGE_DISPLAY_ONCE') },
				{ optValue: 'always', optText: i18n('TAB_BRANDING/OPTION_WELCOME_PAGE_DISPLAY_ALWAYS') }
			];
		});
	}

	onBuild() {
		_.delay(() => {
			const f1 = settingsSaveHelperSimpleFunction(this.title.trigger, this),
				f2 = settingsSaveHelperSimpleFunction(this.loadingDesc.trigger, this),
				f3 = settingsSaveHelperSimpleFunction(this.faviconUrl.trigger, this);

			this.title.subscribe((value) => {
				Remote.saveAdminConfig(f1, {
					'Title': trim(value)
				});
			});

			this.loadingDesc.subscribe((value) => {
				Remote.saveAdminConfig(f2, {
					'LoadingDescription': trim(value)
				});
			});

			this.faviconUrl.subscribe((value) => {
				Remote.saveAdminConfig(f3, {
					'FaviconUrl': trim(value)
				});
			});
		}, Magics.Time50ms);

		_.delay(() => {
			const f1 = settingsSaveHelperSimpleFunction(this.loginLogo.trigger, this),
				f2 = settingsSaveHelperSimpleFunction(this.loginDescription.trigger, this),
				f3 = settingsSaveHelperSimpleFunction(this.loginCss.trigger, this),
				f4 = settingsSaveHelperSimpleFunction(this.userLogo.trigger, this),
				f5 = settingsSaveHelperSimpleFunction(this.userLogoTitle.trigger, this),
				f6 = settingsSaveHelperSimpleFunction(this.loginBackground.trigger, this),
				f7 = settingsSaveHelperSimpleFunction(this.userCss.trigger, this),
				f8 = settingsSaveHelperSimpleFunction(this.welcomePageUrl.trigger, this),
				f9 = settingsSaveHelperSimpleFunction(this.welcomePageDisplay.trigger, this),
				f10 = settingsSaveHelperSimpleFunction(this.userLogoMessage.trigger, this),
				f11 = settingsSaveHelperSimpleFunction(this.userIframeMessage.trigger, this);

			this.loginLogo.subscribe((value) => {
				Remote.saveAdminConfig(f1, {
					'LoginLogo': trim(value)
				});
			});

			this.loginDescription.subscribe((value) => {
				Remote.saveAdminConfig(f2, {
					'LoginDescription': trim(value)
				});
			});

			this.loginCss.subscribe((value) => {
				Remote.saveAdminConfig(f3, {
					'LoginCss': trim(value)
				});
			});

			this.userLogo.subscribe((value) => {
				Remote.saveAdminConfig(f4, {
					'UserLogo': trim(value)
				});
			});

			this.userLogoTitle.subscribe((value) => {
				Remote.saveAdminConfig(f5, {
					'UserLogoTitle': trim(value)
				});
			});

			this.userLogoMessage.subscribe((value) => {
				Remote.saveAdminConfig(f10, {
					'UserLogoMessage': trim(value)
				});
			});

			this.userIframeMessage.subscribe((value) => {
				Remote.saveAdminConfig(f11, {
					'UserIframeMessage': trim(value)
				});
			});

			this.loginBackground.subscribe((value) => {
				Remote.saveAdminConfig(f6, {
					'LoginBackground': trim(value)
				});
			});

			this.userCss.subscribe((value) => {
				Remote.saveAdminConfig(f7, {
					'UserCss': trim(value)
				});
			});

			this.welcomePageUrl.subscribe((value) => {
				Remote.saveAdminConfig(f8, {
					'WelcomePageUrl': trim(value)
				});
			});

			this.welcomePageDisplay.subscribe((value) => {
				Remote.saveAdminConfig(f9, {
					'WelcomePageDisplay': trim(value)
				});
			});
		}, Magics.Time50ms);
	}
}

export { BrandingAdminSettings, BrandingAdminSettings as default };