import React, { useEffect, useState } from 'react';
import { ETheme } from '../../../types/Theme';
import { useFeatures, useOakTheme } from '../../../platforms/web';
import RadioColor from './RadioColor';
import RadioRect from './RadioRect';
import { ReactComponent as Light } from './assets/svg/assets-setting-light.svg';
import { ReactComponent as Dark } from './assets/svg/assets-setting-dark.svg';
import { ReactComponent as System } from './assets/svg/assets-setting-auto.svg';
import Style from './index.module.less';
var ESettingTheme;
(function (ESettingTheme) {
    ESettingTheme[ESettingTheme["system"] = 0] = "system";
})(ESettingTheme || (ESettingTheme = {}));
export default function Render() {
    const features = useFeatures();
    const oakTheme = useOakTheme();
    const t = features.locales.t.bind(features.locales);
    const themeState = features.theme.get();
    const [systemTheme, setSystemTheme] = useState(themeState?.systemTheme);
    const [theme, setTheme] = useState(themeState?.themeMode);
    const [themeColor, setThemeColor] = useState(themeState?.color);
    const currentPrimaryColor = oakTheme.token?.colorPrimary || themeColor;
    const themeList = [
        {
            value: ETheme.light,
            image: <Light />,
            name: t('light'),
        },
        {
            value: ETheme.dark,
            image: <Dark />,
            name: t('dark'),
        },
        {
            value: ESettingTheme.system,
            image: <System />,
            name: t('system'),
        },
    ];
    const handleThemeSwitch = (value) => {
        if (value === undefined) {
            return;
        }
        if (value === ESettingTheme.system) {
            features.theme.openSystemTheme();
        }
        else {
            features.theme.switchThemeMode(value);
        }
    };
    useEffect(() => {
        const themeUnsub = features.theme.subscribe(() => {
            const themeState = features.theme.get();
            setSystemTheme(themeState.systemTheme);
            setTheme(themeState.themeMode);
            setThemeColor(themeState.color);
        });
        return () => {
            themeUnsub();
        };
    }, [features]);
    return (<div>
            <div className={Style.settingTitle}>{t('themeMode')}</div>
            <RadioRect value={systemTheme ? ESettingTheme.system : theme} onChange={handleThemeSwitch} options={themeList}/>

            <div className={Style.settingTitle}>{t('themeColor')}</div>
            <RadioColor value={currentPrimaryColor} onChange={(value) => features.theme.switchColor(value)}/>
        </div>);
}