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

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

import { MenuTypeEnum, TriggerEnum } from '@/enums/menuEnum';

import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
<%_ if (enableTranslation) { _%>
import { useI18n } from '@/hooks/web/useI18n';
<%_ } _%>

import { baseHandler } from './handler';

import {
  HandlerEnum,
  contentModeOptions,
  topMenuAlignOptions,
  getMenuTriggerOptions,
  routerTransitionOptions,
  menuTypeList,
  mixSidebarTriggerOptions,
} from './enum';

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

<%_ if (enableTranslation) { _%>
const { t } = useI18n();
<%_ } _%>

export default defineComponent({
  name: 'SettingDrawer',
  setup(_, { attrs }) {
    const {
      getContentMode,
      getShowFooter,
      getShowBreadCrumb,
      getShowBreadCrumbIcon,
      getShowLogo,
      getFullContent,
      getColorWeak,
      getGrayMode,
      getLockTime,
      getShowDarkModeToggle,
      getThemeColor,
    } = useRootSetting();

    const { getOpenPageLoading, getBasicTransition, getEnableTransition, getOpenNProgress } =
      useTransitionSetting();

    const {
      getIsHorizontal,
      getShowMenu,
      getMenuType,
      getTrigger,
      getCollapsedShowTitle,
      getMenuFixed,
      getCollapsed,
      getCanDrag,
      getTopMenuAlign,
      getAccordion,
      getMenuWidth,
      getMenuBgColor,
      getIsTopMenu,
      getSplit,
      getIsMixSidebar,
      getCloseMixSidebarOnChange,
      getMixSideTrigger,
      getMixSideFixed,
    } = useMenuSetting();

    const {
      getShowHeader,
      getFixed: getHeaderFixed,
      getHeaderBgColor,
      getShowSearch,
    } = useHeaderSetting();

    const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold, getTabsTheme } = useMultipleTabSetting();

    const getShowMenuRef = computed(() => {
      return unref(getShowMenu) && !unref(getIsHorizontal);
    });

    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 renderHeaderTheme() {
      return (
        <ThemeColorPicker
          colorList={HEADER_PRESET_BG_COLOR_LIST}
          def={unref(getHeaderBgColor)}
          event={HandlerEnum.HEADER_THEME}
        />
      );
    }

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

    /**
     * @description:
     */
    function renderFeatures() {
      let triggerDef = unref(getTrigger);

      const triggerOptions = getMenuTriggerOptions(unref(getSplit));
      const some = triggerOptions.some((item) => item.value === triggerDef);
      if (!some) {
        triggerDef = TriggerEnum.FOOTER;
      }

      return (
        <>
          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.splitMenu')<% } else { %>'t$t('layout.setting.splitMenu')$t$'<% } %>}
            event={HandlerEnum.MENU_SPLIT}
            def={unref(getSplit)}
            disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}
          />
          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.mixSidebarFixed')<% } else { %>'t$t('layout.setting.mixSidebarFixed')$t$'<% } %>}
            event={HandlerEnum.MENU_FIXED_MIX_SIDEBAR}
            def={unref(getMixSideFixed)}
            disabled={!unref(getIsMixSidebar)}
          />

          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.closeMixSidebarOnChange')<% } else { %>'t$t('layout.setting.closeMixSidebarOnChange')$t$'<% } %>}
            event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE}
            def={unref(getCloseMixSidebarOnChange)}
            disabled={!unref(getIsMixSidebar)}
          />
          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.menuCollapse')<% } else { %>'t$t('layout.setting.menuCollapse')$t$'<% } %>}
            event={HandlerEnum.MENU_COLLAPSED}
            def={unref(getCollapsed)}
            disabled={!unref(getShowMenuRef)}
          />

          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.menuDrag')<% } else { %>'t$t('layout.setting.menuDrag')$t$'<% } %>}
            event={HandlerEnum.MENU_HAS_DRAG}
            def={unref(getCanDrag)}
            disabled={!unref(getShowMenuRef)}
          />
          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.menuSearch')<% } else { %>'t$t('layout.setting.menuSearch')$t$'<% } %>}
            event={HandlerEnum.HEADER_SEARCH}
            def={unref(getShowSearch)}
            disabled={!unref(getShowHeader)}
          />
          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.menuAccordion')<% } else { %>'t$t('layout.setting.menuAccordion')$t$'<% } %>}
            event={HandlerEnum.MENU_ACCORDION}
            def={unref(getAccordion)}
            disabled={!unref(getShowMenuRef)}
          />

          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.collapseMenuDisplayName')<% } else { %>'t$t('layout.setting.collapseMenuDisplayName')$t$'<% } %>}
            event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE}
            def={unref(getCollapsedShowTitle)}
            disabled={!unref(getShowMenuRef) || !unref(getCollapsed) || unref(getIsMixSidebar)}
          />

          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.fixedHeader')<% } else { %>'t$t('layout.setting.fixedHeader')$t$'<% } %>}
            event={HandlerEnum.HEADER_FIXED}
            def={unref(getHeaderFixed)}
            disabled={!unref(getShowHeader)}
          />
          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.fixedSideBar')<% } else { %>'t$t('layout.setting.fixedSideBar')$t$'<% } %>}
            event={HandlerEnum.MENU_FIXED}
            def={unref(getMenuFixed)}
            disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
          />
          <SelectItem
            title={<% if (enableTranslation) { %>t('layout.setting.mixSidebarTrigger')<% } else { %>'t$t('layout.setting.mixSidebarTrigger')$t$'<% } %>}
            event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR}
            def={unref(getMixSideTrigger)}
            options={mixSidebarTriggerOptions}
            disabled={!unref(getIsMixSidebar)}
          />
          <SelectItem
            title={<% if (enableTranslation) { %>t('layout.setting.topMenuLayout')<% } else { %>'t$t('layout.setting.topMenuLayout')$t$'<% } %>}
            event={HandlerEnum.MENU_TOP_ALIGN}
            def={unref(getTopMenuAlign)}
            options={topMenuAlignOptions}
            disabled={
              !unref(getShowHeader) ||
              unref(getSplit) ||
              (!unref(getIsTopMenu) && !unref(getSplit)) ||
              unref(getIsMixSidebar)
            }
          />
          <SelectItem
            title={<% if (enableTranslation) { %>t('layout.setting.menuCollapseButton')<% } else { %>'t$t('layout.setting.menuCollapseButton')$t$'<% } %>}
            event={HandlerEnum.MENU_TRIGGER}
            def={triggerDef}
            options={triggerOptions}
            disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
          />
          <SelectItem
            title={<% if (enableTranslation) { %>t('layout.setting.contentMode')<% } else { %>'t$t('layout.setting.contentMode')$t$'<% } %>}
            event={HandlerEnum.CONTENT_MODE}
            def={unref(getContentMode)}
            options={contentModeOptions}
          />
          <InputNumberItem
            title={<% if (enableTranslation) { %>t('layout.setting.autoScreenLock')<% } else { %>'t$t('layout.setting.autoScreenLock')$t$'<% } %>}
            min={0}
            event={HandlerEnum.LOCK_TIME}
            defaultValue={unref(getLockTime)}
            formatter={(value: string) => {
              return parseInt(value) === 0
                ? `0(<% if (enableTranslation) { %>${t('layout.setting.notAutoScreenLock')}<% } else { %>t$t('layout.setting.notAutoScreenLock')$t$<% } %>)`
                : `${value}<% if (enableTranslation) { %>${t('layout.setting.minute')}<% } else { %>t$t('layout.setting.minute')$t$<% } %>`;
            }}
          />
          <InputNumberItem
            title={<% if (enableTranslation) { %>t('layout.setting.expandedMenuWidth')<% } else { %>'t$t('layout.setting.expandedMenuWidth')$t$'<% } %>}
            max={600}
            min={100}
            step={10}
            event={HandlerEnum.MENU_WIDTH}
            disabled={!unref(getShowMenuRef)}
            defaultValue={unref(getMenuWidth)}
            formatter={(value: string) => `${parseInt(value)}px`}
          />
        </>
      );
    }

    function renderContent() {
      return (
        <>
          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.breadcrumb')<% } else { %>'t$t('layout.setting.breadcrumb')$t$'<% } %>}
            event={HandlerEnum.SHOW_BREADCRUMB}
            def={unref(getShowBreadCrumb)}
            disabled={!unref(getShowHeader)}
          />

          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.breadcrumbIcon')<% } else { %>'t$t('layout.setting.breadcrumbIcon')$t$'<% } %>}
            event={HandlerEnum.SHOW_BREADCRUMB_ICON}
            def={unref(getShowBreadCrumbIcon)}
            disabled={!unref(getShowHeader)}
          />

          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.tabs')<% } else { %>'t$t('layout.setting.tabs')$t$'<% } %>}
            event={HandlerEnum.TABS_SHOW}
            def={unref(getShowMultipleTab)}
          />

          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.tabsRedoBtn')<% } else { %>'t$t('layout.setting.tabsRedoBtn')$t$'<% } %>}
            event={HandlerEnum.TABS_SHOW_REDO}
            def={unref(getShowRedo)}
            disabled={!unref(getShowMultipleTab)}
          />

          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.tabsQuickBtn')<% } else { %>'t$t('layout.setting.tabsQuickBtn')$t$'<% } %>}
            event={HandlerEnum.TABS_SHOW_QUICK}
            def={unref(getShowQuick)}
            disabled={!unref(getShowMultipleTab)}
          />
          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.tabsFoldBtn')<% } else { %>'t$t('layout.setting.tabsFoldBtn')$t$'<% } %>}
            event={HandlerEnum.TABS_SHOW_FOLD}
            def={unref(getShowFold)}
            disabled={!unref(getShowMultipleTab)}
          />

          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.sidebar')<% } else { %>'t$t('layout.setting.sidebar')$t$'<% } %>}
            event={HandlerEnum.MENU_SHOW_SIDEBAR}
            def={unref(getShowMenu)}
            disabled={unref(getIsHorizontal)}
          />

          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.header')<% } else { %>'t$t('layout.setting.header')$t$'<% } %>}
            event={HandlerEnum.HEADER_SHOW}
            def={unref(getShowHeader)}
          />
          <SwitchItem
            title="Logo"
            event={HandlerEnum.SHOW_LOGO}
            def={unref(getShowLogo)}
            disabled={unref(getIsMixSidebar)}
          />
          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.footer')<% } else { %>'t$t('layout.setting.footer')$t$'<% } %>}
            event={HandlerEnum.SHOW_FOOTER}
            def={unref(getShowFooter)}
          />
          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.fullContent')<% } else { %>'t$t('layout.setting.fullContent')$t$'<% } %>}
            event={HandlerEnum.FULL_CONTENT}
            def={unref(getFullContent)}
          />

          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.grayMode')<% } else { %>'t$t('layout.setting.grayMode')$t$'<% } %>}
            event={HandlerEnum.GRAY_MODE}
            def={unref(getGrayMode)}
          />

          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.colorWeak')<% } else { %>'t$t('layout.setting.colorWeak')$t$'<% } %>}
            event={HandlerEnum.COLOR_WEAK}
            def={unref(getColorWeak)}
          />
        </>
      );
    }

    function renderTransition() {
      return (
        <>
          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.progress')<% } else { %>'t$t('layout.setting.progress')$t$'<% } %>}
            event={HandlerEnum.OPEN_PROGRESS}
            def={unref(getOpenNProgress)}
          />
          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.switchLoading')<% } else { %>'t$t('layout.setting.switchLoading')$t$'<% } %>}
            event={HandlerEnum.OPEN_PAGE_LOADING}
            def={unref(getOpenPageLoading)}
          />

          <SwitchItem
            title={<% if (enableTranslation) { %>t('layout.setting.switchAnimation')<% } else { %>'t$t('layout.setting.switchAnimation')$t$'<% } %>}
            event={HandlerEnum.OPEN_ROUTE_TRANSITION}
            def={unref(getEnableTransition)}
          />

          <SelectItem
            title={<% if (enableTranslation) { %>t('layout.setting.animationType')<% } else { %>'t$t('layout.setting.animationType')$t$'<% } %>}
            event={HandlerEnum.ROUTER_TRANSITION}
            def={unref(getBasicTransition)}
            options={routerTransitionOptions}
            disabled={!unref(getEnableTransition)}
          />
        </>
      );
    }

    return () => (
      <BasicDrawer
        {...attrs}
        title={<% if (enableTranslation) { %>t('layout.setting.drawerTitle')<% } else { %>'t$t('layout.setting.drawerTitle')$t$'<% } %>}
        width={330}
        class="setting-drawer"
      >
        {unref(getShowDarkModeToggle) && <Divider>{() => <% if (enableTranslation) { %>t('layout.setting.darkMode')<% } else { %>'t$t('layout.setting.darkMode')$t$'<% } %>}</Divider>}
        {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}
        <Divider>{() => <% if (enableTranslation) { %>t('layout.setting.navMode')<% } else { %>'t$t('layout.setting.navMode')$t$'<% } %>}</Divider>
        {renderSidebar()}
        {<Divider>{() => <% if (enableTranslation) { %>t('layout.setting.sysTheme')<% } else { %>'t$t('layout.setting.sysTheme')$t$'<% } %>}</Divider>}
        {renderMainTheme()}
        <Divider>{() => <% if (enableTranslation) { %>t('layout.setting.headerTheme')<% } else { %>'t$t('layout.setting.headerTheme')$t$'<% } %>}</Divider>
        {renderHeaderTheme()}
        <Divider>{() => <% if (enableTranslation) { %>t('layout.setting.sidebarTheme')<% } else { %>'t$t('layout.setting.sidebarTheme')$t$'<% } %>}</Divider>
        {renderSiderTheme()}
        <Divider>{() => <% if (enableTranslation) { %>t('layout.setting.interfaceFunction')<% } else { %>'t$t('layout.setting.interfaceFunction')$t$'<% } %>}</Divider>
        {renderFeatures()}
        <Divider>{() => <% if (enableTranslation) { %>t('layout.setting.interfaceDisplay')<% } else { %>'t$t('layout.setting.interfaceDisplay')$t$'<% } %>}</Divider>
        {renderContent()}
        <Divider>{() => <% if (enableTranslation) { %>t('layout.setting.animation')<% } else { %>'t$t('layout.setting.animation')$t$'<% } %>}</Divider>
        {renderTransition()}
        <Divider />
        <SettingFooter />
      </BasicDrawer>
    );
  },
});
