import { reactive } from 'vue';

import i18n from '@/i18n';
import { increaseBrightness, parseColor } from '@/hook/color';
import { globalSetting } from '@/hook/global';

const { t, locale } = i18n.global;
locale.value = globalSetting.language;

export const colorManager = reactive({
    currentGerneralIndex: 0,
    generals: [
        {
            value: 0,
            type: 'wire',
            label: t('common.line'),
            color: 'white',
        },
        {
            value: 1,
            type: 'port',
            label: t('common.port'),
            color: 'white',
        },
        {
            value: 2,
            type: 'instance',
            label: t('common.instance'),
            color: 'white',
        },
        {
            value: 3,
            type: 'cross-dot',
            label: t('cross-dot'),
            color: 'white'
        },
        {
            value: 4,
            type: 'wire-active',
            label: t('common.selected-wire'),
            color: 'white'
        },
        {
            value: 5,
            type: 'constant',
            label: t('common.constant'),
            color: 'white'
        }
    ],

    currentCellIndex: 0,
    cells: [
        {
            value: 0,
            type: 'combined',
            label: t('cell.combined'),
            color: 'white'
        },
        {
            value: 1,
            type: 'simple',
            label: t('cell.simple'),
            color: 'white'
        },
        {
            value: 2,
            type: 'flip',
            label: t('cell.flip'),
            color: 'white'
        },
        {
            value: 3,
            type: 'binary',
            label: t('cell.binary'),
            color: 'white'
        },
        {
            value: 4,
            type: 'coarse',
            label: t('cell.coarse'),
            color: 'white'
        },
        {
            value: 5,
            type: 'finite',
            label: t('cell.finite'),
            color: 'white'
        },
        {
            value: 6,
            type: 'memories',
            label: t('cell.memories'),
            color: 'white'
        },
        {
            value: 7,
            type: 'multiplexers',
            label: t('cell.multiplexers'),
            color: 'white'
        },
        {
            value: 8,
            type: 'registers',
            label: t('cell.registers'),
            color: 'white'
        },
        {
            value: 9,
            type: 'unary',
            label: t('cell.unary'),
            color: 'white'
        }
    ],

    initColor() {
        const rootStyles = getComputedStyle(document.documentElement);
        for (const item of this.generals) {
            const optionName = `--${item.type}-color`;
            const colorString = rootStyles.getPropertyValue(optionName);
            item.color = colorString;
        }

        for (const item of this.cells) {
            const optionName = `--${item.type}-color`;
            const colorString = rootStyles.getPropertyValue(optionName);
            item.color = colorString;
        }
    }
});

/**
 * @description 通用颜色设置发生变时
 * @param {string} colorString 用户选择的颜色的字符串 
 */
export function onGeneralColorChange(colorString) {
    const { r, g, b } = parseColor(colorString);
    const index = colorManager.currentGerneralIndex;
    const item = colorManager.generals[index];
    const borderColor = `rgb(${r}, ${g}, ${b})`;
    const fillColor = `rgba(${r}, ${g}, ${b}, 0.1)`;
    const rootStyles = getComputedStyle(document.documentElement);
    document.documentElement.style.setProperty(`--${item.type}-color`, borderColor);
    document.documentElement.style.setProperty(`--${item.type}-fill-color`, fillColor);
}

export function onCellColorChange(colorString) {
    const { r, g, b } = parseColor(colorString);
    const index = colorManager.currentGerneralIndex;
    const item = colorManager.generals[index];
    const borderColor = `rgb(${r}, ${g}, ${b})`;
    
    const { ir, ig, ib } = increaseBrightness({ r, g, b }, 10);
    const fillColor = `rgb(${ir}, ${ig}, ${ib})`;
    
    const rootStyles = getComputedStyle(document.documentElement);
    document.documentElement.style.setProperty(`--${item.type}-color`, borderColor);
    document.documentElement.style.setProperty(`--${item.type}-fill-color`, fillColor);
}

export const predefinedColors = [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585'
];