<template>
    <div class="setting-wrapper">
        <el-scrollbar height="98vh">
            <div class="setting-section">
                <h2>{{ t('general-setting') }}</h2>
                <div class="setting-option" style="width: 220px;">
                    <span>
                        <span class="iconfont icon-i18n"></span>
                        &ensp;
                        <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('prerender') }}
                            <help-icon placement="left"
                                :content="t('prerender-description')"
                            ></help-icon>
                        </span>
                    <el-switch v-model="globalSetting.prerender" size="default"/>
                </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>

                <br>
                
                <div class="setting-option" style="width: 380px;">
                    <span class="option-title" style="width: 300px;">
                        {{ t('horizontal-scaling-ratio') }}
                        <help-icon placement="left"
                            :content="t('horizontal-scaling-ratio-description')"
                        ></help-icon>
                    </span>
                    <el-slider v-model="globalSetting.HorizontalScalingRatio" show-stops :min="1" :max="5"/>
                </div>
                <br>
                <div class="setting-option" style="width: 380px;">
                    <span class="option-title" style="width: 300px;">
                        {{ t('horizontal-roll-ratio') }}
                        <help-icon placement="left"
                            :content="t('horizontal-roll-ratio-description')"
                        ></help-icon>
                    </span>
                    <el-slider v-model="globalSetting.HorizontalRollRatio" show-stops :min="1" :max="5"/>
                </div>
                <br>
                <div class="setting-option" style="width: 380px;">
                    <span class="option-title" style="width: 300px;">
                        {{ t('vertical-roll-ratio') }}
                        <help-icon placement="left"
                            :content="t('vertical-roll-ratio-description')"
                        ></help-icon>
                    </span>
                    <el-slider v-model="globalSetting.VerticalRollRario" show-stops :min="1" :max="5"/>
                </div>
            </div>


            <div class="setting-section">
                <h2>{{ t('appearance-setting') }}</h2>
                <div class="setting-option">
                    <span class="option-title" style="width: 150px;">{{ t('display-wave-height') }}</span>
                    <el-input-number v-model="globalSetting.displaySignalHeight" :min="1" :max="100" @change="safeModifySignalTrackHeight" size="default"/>
                </div>

                <br>

                <div class="setting-option">
                    <span class="option-title" style="width: 150px;">{{ t('display-signal-info-scope') }}</span>
                    <el-checkbox-group v-model="globalSetting.displaySignalInfoScope" size="default">
                        <el-checkbox-button value="width"  border>{{ t('display-signal-info-scope.width') }}</el-checkbox-button>
                        <el-checkbox-button value="parent" border>{{ t('display-signal-info-scope.parent') }}</el-checkbox-button>
                    </el-checkbox-group>
                </div>

                <br>

                <div class="setting-option">
                    <span class="option-title" style="width: 100px;">{{ t('wavecolor') }}</span>
                    <div class="option-group">
                        <div style="width: 100px;">
                            <el-select
                                v-model="wavecolor.currentOptionIndex"
                                collapse-tags
                                collapse-tags-tooltip
                                placeholder="Select"
                            >
                                <el-option v-for="option in wavecolor.options" :key="option.value"
                                    :label="option.label" :value="option.value" />
                            </el-select>
                        </div>
                        <div style="height: 20px; width: 20px;"></div>
                        <el-color-picker
                            v-model="wavecolor.colors[wavecolor.currentOptionIndex]"
                            :predefine="predefinedColors"
                            :teleported="false"
                        />
                    </div>
                </div>

                <br>

                <div class="setting-option">
                    <span class="option-title" style="width: 100px;">{{ t('setting.appearance.pivot-color') }}</span>
                    <div class="option-group">
                        <div style="width: 100px;">
                            <el-select
                                v-model="pivotColor.currentOptionIndex"
                                collapse-tags
                                collapse-tags-tooltip
                                placeholder="Select"
                            >
                                <el-option v-for="option in pivotColor.options" :key="option.value"
                                    :label="option.label" :value="option.value" />
                            </el-select>
                        </div>
                        <div style="height: 20px; width: 20px;"></div>
                        <el-color-picker
                            v-model="pivotColor.colors[pivotColor.currentOptionIndex]"
                            :predefine="predefinedColors"
                            :teleported="false"
                        />
                    </div>
                </div>
            </div>

            
            <div class="setting-section">
                <h2>{{ t('search-setting') }}</h2>
                <div class="setting-option">
                    <span class="option-title">{{ t('search-case-sensitivity') }}</span>
                    <el-switch
                        v-model="globalSetting.caseSensitivity"
                        active-text="ON"
                        inactive-text="OFF"  
                    />
                </div>

                <br>

                <div class="setting-option">
                    <span class="option-title">{{ t('search-display-parent-only') }}</span>
                    <el-switch
                        v-model="globalSetting.displayParentOnly"
                        active-text="ON"
                        inactive-text="OFF"
                    />
                </div>

                <br>

                <div class="setting-option">
                    <span class="option-title">{{ t('search-scope') }}</span>
                    <div style="width: 150px;">
                        <el-select
                            v-model="globalSetting.searchScope"
                            multiple
                            collapse-tags
                            collapse-tags-tooltip
                            placeholder="Select"
                        >
                            <el-option v-for="name in scopes" :key="name"
                                :label="name" :value="name" />
                            <el-option v-for="name in variables" :key="name"
                                :label="name" :value="name" />
                        </el-select>
                    </div>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { reactive, defineComponent, watch, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { globalSetting, globalLookup } from '@/hook/global';
import { debounceWrapper, scopes, variables, predefinedColors, webglColor2rgba, rgba2WebglColor } from '@/hook/utils';
import { gl_Colors } from '@/hook/wave-view/render-utils';
import HelpIcon from '../help-icon.vue';
import { UserPivotColor } from '../pivot/pivot-view';
import { MovingPivot, SystemPivot } from '../pivot/cursor';

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;
}

const wavecolor = reactive({
    options: [
        {
            value: 0,
            label: t('wavecolor.normal-bit')
        },
        {
            value: 1,
            label: t('wavecolor.normal-vec')
        },
        {
            value: 2,
            label: t('wavecolor.high-impedance')
        },
        {
            value: 3,
            label: t('wavecolor.unknown')
        }
    ],
    glColorMap: [2, 5, 4, 1],
    currentOptionIndex: 0,
    colors: [
        webglColor2rgba(...gl_Colors.slice(2 * 4, 2 * 4 + 4)),
        webglColor2rgba(...gl_Colors.slice(5 * 4, 5 * 4 + 4)),
        webglColor2rgba(...gl_Colors.slice(4 * 4, 4 * 4 + 4)),
        webglColor2rgba(...gl_Colors.slice(1 * 4, 1 * 4 + 4)),
    ],
    reset() {}
});

const pivotColor = reactive({
    options: [
        {
            value: 0,
            label: t('setting.appearance.moving-pivot')
        },
        {
            value: 1,
            label: t('setting.appearance.user-pivot')
        },
        {
            value: 2,
            label: t('setting.appearance.system-pivot')
        }
    ],
    currentOptionIndex: 0,
    colors: [
        MovingPivot.color,
        UserPivotColor.value,
        SystemPivot.color
    ]
});



// 更新默认波形颜色
watch(() => wavecolor.colors, () => {
    const colorString = wavecolor.colors[wavecolor.currentOptionIndex];
    const rgba = rgba2WebglColor(colorString);
    if (rgba !== undefined) {
        const currentOption = wavecolor.options[wavecolor.currentOptionIndex];
        const waveRender = globalLookup.getWaveRender();
        const glColorIndex = wavecolor.glColorMap[currentOption.value];
        const colorUpdaters = [{ index: glColorIndex, rgba }];
        if (glColorIndex === 2) {
            // 默认情况下， value = 0 和 value = 1 保持一致
            colorUpdaters.push({ index: 3, rgba });
        }
        waveRender.updateGLColor(colorUpdaters, { updateMask: true });
    }
}, { deep: true });

// 更新信标颜色
watch(() => pivotColor.colors, () => {
    const colorString = pivotColor.colors[pivotColor.currentOptionIndex];
    switch (pivotColor.currentOptionIndex) {
        case 0:
            MovingPivot.color = colorString;
            break;
        case 1:
            UserPivotColor.value = colorString;
            break;
        case 2:
            SystemPivot.color = colorString;
            break;
        default:
            break;
    }
}, { deep: true });

const languageSetting = reactive({
    options: [
        {
            value: 'en',
            text: 'English'
        },
        {
            value: 'zh',
            text: '简体中文'
        },
        {
            value: 'zhTw',
            text: '繁體中文'
        },
        {
            value: 'ja',
            text: '日本語'
        },
        {
            value: 'ko',
            text: '한국어'
        },
        {   
            value: 'de',
            text: 'Deutsch'
        },
        {
            value: 'fr',
            text: 'Français'
        },
        {
            value: 'ru',
            text: 'Русский'
        },
        {
            value: 'ar',
            text: 'العربية'
        }
    ]
});

function modifySignalTrackHeight() {
    document.body.style.setProperty('--display-signal-info-height', globalSetting.displaySignalHeight + 'px');
    const waveRender = globalLookup.getWaveRender();
    waveRender.render();
}

const safeModifySignalTrackHeight = debounceWrapper(modifySignalTrackHeight, 200);


</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: 360px !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;
}

</style>