import React, { useCallback, useEffect, useState } from 'react';
import { Popover, Tooltip, Checkbox } from 'antd';
import { Icon } from '@/lib';
import classNames from 'classnames';
import { CheckOutlined } from '@ant-design/icons';
import _ from 'lodash';
import styles from './index.less';
import { observer } from 'mobx-react';
import { useMobStore } from '@/hooks';

declare type ActionProps = {};
const Actions: React.FC<ActionProps> = observer(() => {
  return (
    <div className={styles.actions}>
      <Popover
        title={'系统设置'}
        content={() => <Menu />}
        placement="bottomLeft"
        trigger="click"
        overlayClassName={styles.overlay}
        overlayInnerStyle={{ borderRadius: 8 }}
      >
        <Icon type="icon-setting" />
      </Popover>
    </div>
  );
});

const Menu = observer(() => {
  const store = useMobStore('baseLayoutStore')
  return (
    <div className={styles.menu}>
      <div className={styles.item}>
        <div className={styles.title}>布局</div>
        <div className={styles.action}>
          <LayoutPick />
        </div>
      </div>
      {
        store.layout === 'mix' && (
          <div className={styles.item}>
            <div className={styles.title}>布局</div>
            <div className={styles.action}>
              <SplitMenuSwitch />
            </div>
          </div>
        )
      }
      <div className={styles.item}>
        <div className={styles.title}>主题</div>
        <div className={styles.action}>
          <ThemePicker />
        </div>
      </div>
    </div>
  );
});

const baseClassName = 'picker';
const LayoutPick = observer(() => {
  const store = useMobStore('baseLayoutStore');
  const onChange = useCallback((layout: string) => {
    store.setLayout(layout);
  }, []);
  return (
    <div className={styles.layoutPicker}>
      <Tooltip title={'顶部模式'} key={'top'}>
        <div
          className={classNames(
            `${baseClassName}-item`,
            `${baseClassName}-item-top`,
            `${baseClassName}-layout-item`,
          )}
          onClick={(e) => {
            e.stopPropagation()
            onChange('top')
          }}
        >
          <CheckOutlined
            className={`${baseClassName}-selectIcon`}
            style={{
              display: store.layout === 'top' ? 'block' : 'none',
            }}
          />
        </div>
      </Tooltip>
      <Tooltip title={'边栏模式'} key={'side'}>
        <div
          className={classNames(
            `${baseClassName}-item`,
            `${baseClassName}-item-side`,
            `${baseClassName}-layout-item`,
          )}
          onClick={(e) => {
            e.stopPropagation()
            onChange('side')
          }}
        >
          <CheckOutlined
            className={`${baseClassName}-selectIcon`}
            style={{
              display: store.layout === 'side' ? 'block' : 'none',
            }}
          />
        </div>
      </Tooltip>
      <Tooltip title={'混合模式'} key={'mix'}>
        <div
          className={classNames(
            `${baseClassName}-item`,
            `${baseClassName}-item-mix`,
            `${baseClassName}-layout-item`,
          )}
          onClick={(e) => {
            e.stopPropagation()
            onChange('mix')
          }}
        >
          <CheckOutlined
            className={`${baseClassName}-selectIcon`}
            style={{
              display: store.layout === 'mix' ? 'block' : 'none',
            }}
          />
        </div>
      </Tooltip>
    </div>
  );
});

const themeConfig = {
  '#1890ff': '拂晓蓝',
  '#F5222D': '薄暮',
  '#FA541C': '火山',
  '#FADB14': '日出',
  '#FAAD14': '日暮',
  '#13C2C2': '明青',
  '#52C41A': '极光绿',
  '#2F54EB': '极客蓝',
  '#722ED1': '酱紫',
};
const ThemePicker = observer(() => {
  const store = useMobStore('baseLayoutStore');
  const onClick = useCallback((color: string) => {
    store.setPrimaryColor(color);
  }, []);
  return (
    <div className={styles.themePicker}>
      {_.map(themeConfig, (v: string, k: string) => (
        <Tooltip title={v} key={k}>
          <div style={{ background: k }} onClick={() => onClick(k)}>
            {store.primaryColor === k ? <CheckOutlined /> : <>&nbsp;</>}
          </div>
        </Tooltip>
      ))}
    </div>
  );
});

const SplitMenuSwitch = observer(() => {
  const [checked, setChecked] = useState<boolean>(false);
  const store = useMobStore('baseLayoutStore');

  useEffect(() => {
    setChecked(store.splitMenus);
  }, [store.splitMenus])

  const onClick = useCallback(({ target }: any) => {
    setChecked(target.checked);
    store.setSplitMenus(target.checked);
  }, []);

  return (
    <div className={styles.base}>
      <Tooltip title='显示顶部菜单'>
        <div>
          <Checkbox onChange={onClick} checked={checked}>显示顶部菜单</Checkbox>
        </div>
      </Tooltip>
    </div>
  );
});

export default Actions;
