import { defineComponent, unref } from 'vue';
import { BasicDrawer } from '/@/components/Drawer/index';
import { Divider } from 'ant-design-vue';
import { TypePicker, ThemeColorPicker, SwitchItem } from './components';

import { AppDarkModeToggle } from '/@/components/Application';

import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';

import { baseHandler } from './handler';

import { HandlerEnum, menuTypeList } from './enum';

import { SIDE_BAR_BG_COLOR_LIST, APP_PRESET_COLOR_LIST } from '/@/settings/designSetting';
import locales from '/@/utils/locales';

export default defineComponent({
  name: 'SettingDrawer',
  setup(_, { attrs }) {
    const { getColorWeak, getGrayMode, getShowDarkModeToggle, getThemeColor } = useRootSetting();

    const { getIsHorizontal, getMenuType, getMenuBgColor } = useMenuSetting();

    function renderSidebar() {
      return (
        <>
          <TypePicker
            menuTypeList={menuTypeList}
            handler={(item: (typeof menuTypeList)[0]) => {
              baseHandler(HandlerEnum.CHANGE_LAYOUT, {
                mode: item.mode,
                type: item.type,
                split: unref(getIsHorizontal) ? false : undefined,
              });
            }}
            def={unref(getMenuType)}
          />
        </>
      );
    }

    function renderSiderTheme() {
      return (
        <ThemeColorPicker
          colorList={SIDE_BAR_BG_COLOR_LIST}
          def={unref(getMenuBgColor)}
          event={HandlerEnum.MENU_THEME}
        />
      );
    }

    function renderMainTheme() {
      return (
        <ThemeColorPicker
          colorList={APP_PRESET_COLOR_LIST}
          def={unref(getThemeColor)}
          event={HandlerEnum.CHANGE_THEME_COLOR}
        />
      );
    }

    function renderContent() {
      return (
        <>
          <SwitchItem title={locales.setting.grayMode} event={HandlerEnum.GRAY_MODE} def={unref(getGrayMode)} />
          <SwitchItem title={locales.setting.colorWeak} event={HandlerEnum.COLOR_WEAK} def={unref(getColorWeak)} />
        </>
      );
    }

    return () => (
      <BasicDrawer {...attrs} title="主题设置" width={330} class="setting-drawer">
        {unref(getShowDarkModeToggle) && <Divider>{() => locales.setting.darkMode}</Divider>}
        {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}
        <Divider>{() => locales.setting.navMode}</Divider>
        {renderSidebar()}
        <Divider>{() => locales.setting.sysTheme}</Divider>
        {renderMainTheme()}
        <Divider>{() => locales.setting.sidebarTheme}</Divider>
        {renderSiderTheme()}
        <Divider>{() => locales.setting.interfaceDisplay}</Divider>
        {renderContent()}
      </BasicDrawer>
    );
  },
});
