import { PlusOutlined, RollbackOutlined, SaveFilled } from '@ant-design/icons';
import { useNavigate } from '@umijs/max';
import { Button, ButtonProps, Dropdown, Popconfirm } from 'antd';
import { MyResponseType } from '..';

type MyButtonsType = { title?: string; to?: string } & ButtonProps;

export const MyButtons = {
  Create({ title, ...rest }: MyButtonsType): JSX.Element {
    return (
      <Button type="primary" icon={<PlusOutlined />} {...rest}>
        {title}
      </Button>
    );
  },
  Default({
    onConfirm,
    isConfirm,
    title,
    description = '是否确定取消?',
    ...rest
  }: {
    onConfirm?: () => void;
    isConfirm?: boolean;
    description?: string;
  } & MyButtonsType): JSX.Element {
    return isConfirm ? (
      <Popconfirm
        title="提示"
        description={description}
        okText="是"
        cancelText="否"
        onConfirm={onConfirm}
      >
        <Button size="small" {...rest}>
          {title}
        </Button>
      </Popconfirm>
    ) : (
      <Button size="small" {...rest}>
        {title}
      </Button>
    );
  },
  View({ title, ...rest }: MyButtonsType): JSX.Element {
    const navigate = useNavigate();
    return (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          if (rest?.to) {
            navigate(rest?.to);
          }
        }}
        {...rest}
      >
        {title ?? '查看'}
      </Button>
    );
  },
  Edit({ title = '编辑', ...rest }: MyButtonsType): JSX.Element {
    return (
      <Button type="primary" size="small" {...rest}>
        {title}
      </Button>
    );
  },
  Save({ title = '保存', ...rest }: MyButtonsType): JSX.Element {
    return (
      <Button type="primary" icon={<SaveFilled />} {...rest}>
        {title}
      </Button>
    );
  },
  Delete({
    onConfirm,
    title = '删除',
    ...rest
  }: { onConfirm: () => void } & MyButtonsType): JSX.Element {
    return (
      <Popconfirm
        title="删除提示"
        description="确定删除?"
        okText="是"
        cancelText="否"
        onConfirm={onConfirm}
      >
        <Button
          type="primary"
          size="small"
          danger
          // icon={<DeleteOutlined />}
          {...rest}
        >
          {title}
        </Button>
      </Popconfirm>
    );
  },
  Export({
    api,
    params,
    title,
    ...rest
  }: {
    api: (data: any) => Promise<MyResponseType>;
    params?: Record<string, any>;
  } & MyButtonsType): JSX.Element {
    return (
      <Dropdown
        menu={{
          onClick: ({ item, key }: any) => {
            console.log(item, key);
            api?.({ ...params, ...{ download_type: key } });
          },
          items: [
            // {
            //   key: 'page',
            //   label: '导出当前页',
            // },
            {
              key: 'query',
              label: '按条件导出',
            },
            // {
            //   key: 'all',
            //   label: '导出全部',
            // },
          ],
        }}
        placement="bottomLeft"
        arrow
      >
        <Button key="MyExportButton" icon={<RollbackOutlined />} {...rest}>
          {title || '导出'}
        </Button>
      </Dropdown>
    );
  },
  SoftDelete() {},
};