import { FloatButton } from 'antd';
import { CompactTheme, DarkTheme } from 'antd-token-previewer/lib/icons';
import { UnorderedListOutlined, LinkOutlined } from '@ant-design/icons';
import { FormattedMessage } from 'dumi';
import React from 'react';
import ThemeIcon from './ThemeIcon';

export type ThemeName = 'light' | 'dark' | 'compact' | 'hideSideBar' | 'hideAnchor';

export type ThemeSwitchProps = {
  value?: ThemeName[];
  onChange: (value: ThemeName[]) => void;
};

const ThemeSwitch: React.FC<ThemeSwitchProps> = (props: ThemeSwitchProps) => {
  const { value = ['light'], onChange } = props;
  return (
    <FloatButton.Group trigger="click" icon={<ThemeIcon />}>
      <FloatButton
        icon={<DarkTheme />}
        type={value.includes('dark') ? 'primary' : 'default'}
        onClick={() => {
          const themeValue = value.includes('dark') ? 'light' : 'dark';
          onChange([themeValue, ...value.filter((item) => ['dark', 'light'].indexOf(item) < 0)]); // compact 值必须放在靠后位置
        }}
        tooltip={<FormattedMessage id="app.theme.switch.dark" />}
      />
      <FloatButton
        icon={<CompactTheme />}
        type={value.includes('compact') ? 'primary' : 'default'}
        onClick={() => {
          if (value.includes('compact')) {
            onChange(value.filter((item) => item !== 'compact'));
          } else {
            onChange([...value, 'compact']);
          }
        }}
        tooltip={<FormattedMessage id="app.theme.switch.compact" />}
      />
      <FloatButton
        icon={<UnorderedListOutlined />}
        type={value.includes('hideSideBar') ? 'primary' : 'default'}
        onClick={() => {
          if (value.includes('hideSideBar')) {
            onChange(value.filter((item) => item !== 'hideSideBar'));
          } else {
            onChange([...value, 'hideSideBar']);
          }
        }}
        tooltip={<FormattedMessage id="app.theme.switch.hideSideBar" />}
      />
      <FloatButton
        icon={<LinkOutlined />}
        type={value.includes('hideAnchor') ? 'primary' : 'default'}
        onClick={() => {
          if (value.includes('hideAnchor')) {
            onChange(value.filter((item) => item !== 'hideAnchor'));
          } else {
            onChange([...value, 'hideAnchor']);
          }
        }}
        tooltip={<FormattedMessage id="app.theme.switch.hideAnchor" />}
      />
    </FloatButton.Group>
  );
};

export default ThemeSwitch;