import React, { memo } from 'react';
import { Row, Col } from '@miragenflow/ui/grid';
import { Switch } from '@miragenflow/ui';
import { useAppDispatch, useAppSelector } from 'modules/store';
import {
  selectGlobal,
  toggleShowHeader,
  toggleShowBreadcrumbs,
  toggleShowFooter,
  switchTheme,
  switchColor,
  switchLayout,
  openSystemTheme,
  ELayout,
} from 'modules/global';
import { ETheme } from 'types/index.d';
import RadioColor from './RadioColor';
import RadioRect from './RadioRect';

import Light from 'assets/svg/assets-setting-light.svg?component';
import Dark from 'assets/svg/assets-setting-dark.svg?component';
import System from 'assets/svg/assets-setting-auto.svg?component';

import Style from './index.module.less';

enum ESettingTheme {
  system,
}

const themeList = [
  {
    value: ETheme.light,
    image: <Light />,
    name: '明亮',
  },
  {
    value: ETheme.dark,
    image: <Dark />,
    name: '黑暗',
  },
  {
    value: ESettingTheme.system,
    image: <System />,
    name: '跟随系统',
  },
];

const layoutList = [
  {
    value: ELayout.side,
    image: <div className={Style.layoutPreview}>侧</div>,
  },
  {
    value: ELayout.top,
    image: <div className={Style.layoutPreview}>顶</div>,
  },
  {
    value: ELayout.mix,
    image: <div className={Style.layoutPreview}>混</div>,
  },
];

export default memo(() => {
  const dispatch = useAppDispatch();
  const globalState = useAppSelector(selectGlobal);

  const handleThemeSwitch = (value: any) => {
    if (value === ESettingTheme.system) {
      dispatch(openSystemTheme());
    } else {
      dispatch(switchTheme(value));
      dispatch(switchColor(globalState.color));
    }
  };

  return (
    <div>
      <div className={Style.settingTitle}>主题模式</div>
      <RadioRect
        value={globalState.systemTheme ? ESettingTheme.system : globalState.theme}
        onChange={handleThemeSwitch}
        options={themeList}
        ariaLabel='主题模式'
      />

      <div className={Style.settingTitle}>主题色</div>
      <RadioColor value={globalState.color} onChange={(value) => dispatch(switchColor(value))} />

      <div className={Style.settingTitle}>导航布局</div>
      <RadioRect
        value={globalState.layout}
        onChange={(value) => dispatch(switchLayout(value))}
        options={layoutList}
        ariaLabel='导航布局'
      />

      <div className={Style.settingTitle}>元素开关</div>
      <Row justify='space-between'>
        <Col>
          <div className={Style.settingSubTitle}>显示顶部栏</div>
        </Col>
        <Col>
          <Switch size='large' value={globalState.showHeader} onChange={() => dispatch(toggleShowHeader())} />
        </Col>
      </Row>

      <Row justify='space-between'>
        <Col>
          <div className={Style.settingSubTitle}>显示面包屑导航</div>
        </Col>
        <Col>
          <Switch size='large' value={globalState.showBreadcrumbs} onChange={() => dispatch(toggleShowBreadcrumbs())} />
        </Col>
      </Row>

      <Row justify='space-between'>
        <Col>
          <div className={Style.settingSubTitle}>显示页脚</div>
        </Col>
        <Col>
          <Switch size='large' value={globalState.showFooter} onChange={() => dispatch(toggleShowFooter())} />
        </Col>
      </Row>
    </div>
  );
});