import { MyIcon } from '@/global';
import { HomeOutlined } from '@ant-design/icons';
import { SelectLang as UmiSelectLang, useModel } from '@umijs/max';
import { Button, Dropdown, MenuProps, Space, Tour } from 'antd';
import { useEffect, useRef, useState } from 'react';
import DraggableButton from '../DraggableButton';
import MenuChange from '../MenuChange';

export type SiderTheme = 'light' | 'dark';

export const SelectLang = () => {
  return (
    <UmiSelectLang
      style={{
        padding: 4,
      }}
    />
  );
};

export const Question = () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const ref = useRef(null);
  const [open, setOpen] = useState<boolean>(false);
  useEffect(() => {
    let isOne = localStorage.getItem('isOne');
    if (!isOne && initialState?.menuType === 'miniApp' && !open) {
      console.log('111111');
      setOpen(true);
    }
  }, [initialState?.menuType, open]);
  const items: MenuProps['items'] = [
    // { key: "1", label: <Space><MyIcon type='icon-liangdu' />跟随系统</Space> },
    {
      key: '2',
      label: (
        <Space>
          <MyIcon type="icon-brightj2" />
          亮色模式
        </Space>
      ),
    },
    {
      key: '3',
      label: (
        <Space>
          <MyIcon type="icon-yejing" />
          暗色模式
        </Space>
      ),
    },
  ];
  const onClick: MenuProps['onClick'] = ({ key }: any) => {
    localStorage.setItem('navTheme', key);
    setInitialState({ ...initialState, navTheme: key } as any);
  };
  return (
    <Space size={[0, 0]}>
      <Dropdown menu={{ items, onClick }}>
        {initialState?.navTheme === '2' ? (
          <MyIcon type="icon-brightj2" />
        ) : (
          <MyIcon type="icon-yejing" />
        )}
      </Dropdown>
      {initialState?.menuType === 'miniApp' && (
        <DraggableButton ref={ref}>
          <MenuChange menuType="distributor" data={null}>
            <Button type="primary" shape="circle">
              <HomeOutlined />
            </Button>
          </MenuChange>
        </DraggableButton>
      )}
      <Tour
        open={open}
        onClose={() => {
          setOpen(false);
          localStorage.setItem('isOne', '1');
        }}
        steps={[
          {
            title: '返回主页',
            description: (
              <>
                {' '}
                <Button type="primary" shape="circle">
                  <HomeOutlined />
                </Button>{' '}
                可随意拖动位置,点击可从当前页面返回到分销商平台主页！
              </>
            ),
            target: () => ref.current,
          },
        ]}
      />
    </Space>
  );
};