<template>
    <div class="setting-wrapper">
        <el-scrollbar height="98vh">
            <div class="setting-section">
                <h2>{{ t('general-setting') }}</h2>
                <div class="setting-option">
                    <span>
                        <span class="iconfont icon-i18n"></span>
                        <span class="option-title">{{ t('language-setting') }}</span>
                    </span>
                    <div style="width: 100px;">
                        <el-select
                            name="language-setting"
                            class="language-setting"
                            v-model="locale"
                            @change="onlanguagechange"
                        >
                            <el-option
                                v-for="option in languageSetting.options"
                                :value="option.value"
                                :label="option.text"
                                :key="option.value">
                            </el-option>
                        </el-select>
                    </div>

                    <el-dialog
                        v-model="languageDialogShow"
                        class="language-dialog"
                        :title="t('tips')"
                        width="500"
                    >
                        <span>{{ t('setting.language.change-dialog', [currentLanguage]) }}</span>
                        <template #footer>
                        <div class="dialog-footer">
                            <el-button type="primary" @click="confirmLanguageDialog()">
                                {{ t('confirm') }}
                            </el-button>
                        </div>
                        </template>
                    </el-dialog>
                </div>
                <br>


                <div class="setting-option">
                    <span class="option-title">
                        {{ t('render-animation') }}
                    </span>
                    <el-switch
                        v-model="globalSetting.renderAnimation"
                        active-text="ON"
                        inactive-text="OFF"
                    />
                </div>
            </div>

            <div class="setting-section">
                <h2>{{ t('appearance-setting') }}</h2>
                <div class="setting-option">
                    <span class="option-title">
                        {{ t('render-arrow') }}
                    </span>
                    <el-switch
                        @change="onRenderArrowChange"
                        v-model="globalSetting.renderArrow"
                        active-text="ON"
                        inactive-text="OFF"
                    />
                </div>
                <br>

                <div class="setting-option">
                    <span class="option-title">
                        {{ t('bold-multi-width-wire') }}
                    </span>
                    <el-switch
                        v-model="globalSetting.boldMultiWidthWire"
                        active-text="ON"
                        inactive-text="OFF"
                    />
                </div>
                <br>

                <div class="setting-option">
                    <span class="option-title">
                        {{ t('cross-dot-style') }}
                    </span>
                    <div style="width: 100px;">
                        <el-select
                            name="language-setting"
                            class="language-setting"
                            v-model="globalSetting.crossDotStyle"
                            @change="onConnectStyleChange"
                        >
                            <el-option
                                v-for="option in crossDotStyle.options"
                                :value="option.value"
                                :label="option.text"
                                :key="option.value">
                                <span class="option-group">
                                    <span :class="option.icon" class="connection-icon"></span>
                                    <span>{{ option.text }}</span>
                                </span>
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <br>


                <div class="setting-option">
                    <span class="option-title">
                        {{ t('setting.general-color-setting') }}
                    </span>
                    <div class="option-group">
                        <div style="width: 100px;">
                            <el-select
                                v-model="colorManager.currentGerneralIndex"
                                collapse-tags
                                collapse-tags-tooltip
                                placeholder="Select"
                            >
                                <el-option v-for="option in colorManager.generals" :key="option.value"
                                    :label="option.label" :value="option.value" />
                            </el-select>
                        </div>
                        <div style="height: 20px; width: 20px;"></div>
                        <el-color-picker
                            v-model="colorManager.generals[colorManager.currentGerneralIndex].color"
                            @change="onGeneralColorChange"
                            :predefine="predefinedColors"
                        />
                    </div>
                </div>
                <br>

                <div class="setting-option">
                    <span class="option-title">
                        {{ t('setting.cell-color-setting') }}
                    </span>
                    <div class="option-group">
                        <div style="width: 100px;">
                            <el-select
                                v-model="colorManager.currentCellIndex"
                                collapse-tags
                                collapse-tags-tooltip
                                placeholder="Select"
                            >
                                <el-option v-for="option in colorManager.cells" :key="option.value"
                                    :label="option.label" :value="option.value" />
                            </el-select>
                        </div>
                        <div style="height: 20px; width: 20px;"></div>
                        <el-color-picker
                            v-model="colorManager.cells[colorManager.currentCellIndex].color"
                            @change="onCellColorChange"
                            :predefine="predefinedColors"
                        />
                    </div>
                </div>

            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { globalSetting } from '@/hook/global';
import { reactive, defineComponent, watch, ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { languageSetting } from './language';
import { crossDotStyle, onConnectStyleChange } from './cross-dot-style';
import { colorManager, onCellColorChange, onGeneralColorChange, predefinedColors } from './color';

defineComponent({ name: "dide-setting" });
const { t, locale } = useI18n();
locale.value = globalSetting.language;

watch(
    () => locale.value,
    () => {
        globalSetting.language = locale.value;
        localStorage.setItem('setting', JSON.stringify(globalSetting));
    }
);

const currentLanguage = ref('简体中文');
const languageDialogShow = ref(false);

function confirmLanguageDialog() {
    languageDialogShow.value = false;
}

function onlanguagechange(code) {
    const option = languageSetting.options.find(item => item.value === code);
    currentLanguage.value = option.text;
    languageDialogShow.value = true;
}

function onRenderArrowChange() {
    const rootStyles = getComputedStyle(document.documentElement);
    if (globalSetting.renderArrow) {
        document.documentElement.style.setProperty(`--line-arrow-opacity`, '1');
    } else {
        document.documentElement.style.setProperty(`--line-arrow-opacity`, '0');
    }
}

onMounted(() => {
    colorManager.initColor();
});

</script>

<style>
.setting-wrapper {
    width: fit-content;
    padding: 10px;
}

.setting-container {
    overflow-y: scroll;
    height: 99vh;
}

.setting-section {
    padding: 10px;
    margin: 10px;
    border-radius: .3em;
    min-height: 50px;
}

.setting-option {
    margin: 3px;
    padding: 8px 12px;
    height: 40px;
    width: 280px !important;
    border-radius: .5em;
    background-color: var(--background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
}

.option-group {
    display: flex;
    width: fit-content;
}

.option-title {
    font-size: 0.8rem;
    min-width: 80px;
    margin-right: 12px;
    user-select: none;
}

.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner,
.el-checkbox-button__inner {
    font-size: 0.8rem !important;
}

.el-slider__button {
    background-color: var(--background) !important;
}

.el-switch__core .el-switch__action {
    background-color: var(--background) !important;
}

.el-slider__stop {
    background-color: var(--vscode-foreground) !important;
}

.icon-help {
    cursor: pointer;
    transition: var(--animation-3s);
    -webkit-transition: var(--animation-3s);
}

.icon-help:hover {
    color: var(--main-color);
    transition: var(--animation-3s);
    -webkit-transition: var(--animation-3s);
}

.language-dialog {
    color: var(--vscode-foreground);
    background-color: var(--sidebar) !important;
}

.el-dialog__title {
    color: var(--vscode-foreground) !important;
}

.setting-option .icon-i18n {
    margin-right: 8px;
}

.connection-icon {
    width: 12px;
    margin-right: 8px;
    display: flex;
    justify-content: center;
    font-size: 10px;
}

</style>