define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loading', 'connectionManager', 'subtitleAppearanceHelper', 'dom', 'events', 'layoutManager', 'listViewStyle', 'emby-select', 'emby-input', 'emby-checkbox', 'emby-slider', 'flexStyles'], function (require, globalize, appSettings, appHost, focusManager, loading, connectionManager, subtitleAppearanceHelper, dom, events, layoutManager) {
    'use strict';

    function populateLanguages(select, languages) {
        var html = '';

        html += "<option value=''>" + globalize.translate('AnyLanguage') + '</option>';
        for (var i = 0, length = languages.length; i < length; i++) {
            var culture = languages[i];
            html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
        }

        select.innerHTML = html;
    }

    function getSubtitleAppearanceObject(context) {
        var appearanceSettings = {};

        appearanceSettings.textSize = context.querySelector('#selectTextSize').value;
        appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value;
        appearanceSettings.font = context.querySelector('#selectFont').value;
        appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value;
        appearanceSettings.textColor = context.querySelector('#inputTextColor').value;
        appearanceSettings.verticalPosition = context.querySelector('#sliderVerticalPosition').value;

        return appearanceSettings;
    }

    function loadForm(context, user, userSettings, appearanceSettings, apiClient) {

        apiClient.getCultures().then(function (allCultures) {

            if (appHost.supports('subtitleburnsettings') && user.Policy.EnableVideoPlaybackTranscoding) {
                context.querySelector('.fldBurnIn').classList.remove('hide');
            }

            var selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage');

            populateLanguages(selectSubtitleLanguage, allCultures);

            selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || '';
            context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || '';

            context.querySelector('#selectSubtitlePlaybackMode').dispatchEvent(new CustomEvent('change', {}));

            context.querySelector('#selectTextSize').value = appearanceSettings.textSize || '';
            context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || '';
            context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent';
            context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff';
            context.querySelector('#selectFont').value = appearanceSettings.font || '';
            context.querySelector('#sliderVerticalPosition').value = appearanceSettings.verticalPosition;

            context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || '';

            onAppearanceFieldChange({
                target: context.querySelector('#selectTextSize')
            });

            loading.hide();
        });
    }

    function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) {

        var appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey);
        appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context));

        userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey);

        user.Configuration.SubtitleLanguagePreference = context.querySelector('#selectSubtitleLanguage').value;
        user.Configuration.SubtitleMode = context.querySelector('#selectSubtitlePlaybackMode').value;

        return apiClient.updateUserConfiguration(user.Id, user.Configuration);
    }

    function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {

        loading.show();

        appSettings.set('subtitleburnin', context.querySelector('#selectSubtitleBurnIn').value);

        apiClient.getUser(userId).then(function (user) {

            saveUser(context, user, userSettings, instance.appearanceKey, apiClient).then(function () {

                loading.hide();
                if (enableSaveConfirmation) {
                    require(['toast'], function (toast) {
                        toast(globalize.translate('SettingsSaved'));
                    });
                }

                events.trigger(instance, 'saved');

            }, function () {
                loading.hide();
            });
        });
    }

    function onSubmit(e) {
        var self = this;
        var apiClient = connectionManager.getApiClient(self.options.serverId);
        var userId = self.options.userId;
        var userSettings = self.options.userSettings;

        userSettings.setUserInfo(userId, apiClient).then(function () {
            var enableSaveConfirmation = self.options.enableSaveConfirmation;
            save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
        });

        // Disable default form submission
        if (e) {
            e.preventDefault();
        }

        return false;
    }

    function onSubtitleModeChange(e) {

        var view = dom.parentWithClass(e.target, 'subtitlesettings');

        var subtitlesHelp = view.querySelectorAll('.subtitlesHelp');
        for (var i = 0, length = subtitlesHelp.length; i < length; i++) {
            subtitlesHelp[i].classList.add('hide');
        }
        view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide');
    }

    function onAppearanceFieldChange(e) {

        var view = dom.parentWithClass(e.target, 'subtitlesettings');

        var appearanceSettings = getSubtitleAppearanceObject(view);

        var elements = {
            window: view.querySelector('.subtitleappearance-preview-window'),
            text: view.querySelector('.subtitleappearance-preview-text'),
            preview: true
        };

        subtitleAppearanceHelper.applyStyles(elements, appearanceSettings);

        subtitleAppearanceHelper.applyStyles({
            window: view.querySelector('.subtitleappearance-fullpreview-window'),
            text: view.querySelector('.subtitleappearance-fullpreview-text')
        }, appearanceSettings);
    }

    const subtitlePreviewDelay = 1000;
    let subtitlePreviewTimer;

    function showSubtitlePreview(persistent) {
        clearTimeout(subtitlePreviewTimer);

        this._fullPreview.classList.remove('subtitleappearance-fullpreview-hide');

        if (persistent) {
            this._refFullPreview++;
        }

        if (this._refFullPreview === 0) {
            subtitlePreviewTimer = setTimeout(hideSubtitlePreview.bind(this), subtitlePreviewDelay);
        }
    }

    function hideSubtitlePreview(persistent) {
        clearTimeout(subtitlePreviewTimer);

        if (persistent) {
            this._refFullPreview--;
        }

        if (this._refFullPreview === 0) {
            this._fullPreview.classList.add('subtitleappearance-fullpreview-hide');
        }
    }

    function embed(options, self) {

        require(['text!./subtitlesettings.template.html'], function (template) {

            options.element.classList.add('subtitlesettings');
            options.element.innerHTML = globalize.translateDocument(template, 'core');

            options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));

            options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange);
            options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange);
            options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange);
            options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange);
            options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange);
            options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange);

            if (options.enableSaveButton) {
                options.element.querySelector('.btnSave').classList.remove('hide');
            }

            if (appHost.supports('subtitleappearancesettings')) {
                options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide');

                self._fullPreview = options.element.querySelector('.subtitleappearance-fullpreview');
                self._refFullPreview = 0;

                const sliderVerticalPosition = options.element.querySelector('#sliderVerticalPosition');
                sliderVerticalPosition.addEventListener('input', onAppearanceFieldChange);
                sliderVerticalPosition.addEventListener('input', () => showSubtitlePreview.call(self));

                const eventPrefix = window.PointerEvent ? 'pointer' : 'mouse';
                sliderVerticalPosition.addEventListener(`${eventPrefix}enter`, () => showSubtitlePreview.call(self, true));
                sliderVerticalPosition.addEventListener(`${eventPrefix}leave`, () => hideSubtitlePreview.call(self, true));

                if (layoutManager.tv) {
                    sliderVerticalPosition.addEventListener('focus', () => showSubtitlePreview.call(self, true));
                    sliderVerticalPosition.addEventListener('blur', () => hideSubtitlePreview.call(self, true));

                    // Give CustomElements time to attach
                    setTimeout(() => {
                        sliderVerticalPosition.classList.add('focusable');
                        sliderVerticalPosition.enableKeyboardDragging();
                    }, 0);
                }

                options.element.querySelector('.chkPreview').addEventListener('change', (e) => {
                    if (e.target.checked) {
                        showSubtitlePreview.call(self, true);
                    } else {
                        hideSubtitlePreview.call(self, true);
                    }
                });
            }

            self.loadData();

            if (options.autoFocus) {
                focusManager.autoFocus(options.element);
            }
        });
    }

    function SubtitleSettings(options) {

        this.options = options;

        embed(options, this);
    }

    SubtitleSettings.prototype.loadData = function () {

        var self = this;
        var context = self.options.element;

        loading.show();

        var userId = self.options.userId;
        var apiClient = connectionManager.getApiClient(self.options.serverId);
        var userSettings = self.options.userSettings;

        apiClient.getUser(userId).then(function (user) {
            userSettings.setUserInfo(userId, apiClient).then(function () {
                self.dataLoaded = true;

                var appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);

                loadForm(context, user, userSettings, appearanceSettings, apiClient);
            });
        });
    };

    SubtitleSettings.prototype.submit = function () {
        onSubmit.call(this);
    };

    SubtitleSettings.prototype.destroy = function () {
        this.options = null;
    };

    return SubtitleSettings;
});