import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Dropdown, Popconfirm, Space, Spin } from 'antd';
import React, { memo, useState } from 'react';
import { useIntl } from 'umi';
import CustomLink from './index';
interface ManualDropdownItem {
  label: any;
  render?: () => React.ReactChild | React.ReactNode;
  childrens?: ManualDropdownItem[];
  key?: any;
  disabled?: boolean;
  loading?: boolean;
  isNotGroup?: boolean;
  groupTitle?: string;
  onClick?: () => void;
}
interface ManualDropdownProps {
  conf: ManualDropdownItem;
  key?: any;
}
const ManualDropdown = ({ conf, key }: ManualDropdownProps) => {
  const { formatMessage } = useIntl();
  const [open, setOpen] = useState(false);
  return (
    <Dropdown
      open={open}
      onOpenChange={(val) => {
        setOpen(val);
      }}
      menu={{
        // todo 支持默认选中
        // defaultSelectedKeys: conf?.childrens?.map((c, j) => `${key}-group=${j}`),
        items: [
          {
            key: key,
            type: 'group',
            label: conf.isNotGroup
              ? null
              : conf.groupTitle || formatMessage({ id: 'component.CustomLink.all.set' }),
            children: conf?.childrens?.map((child, j) => ({
              label: (
                <CustomLink
                  key={child.key || child.label || `${conf.key || conf.label}${j}`}
                  onClose={() => {
                    setOpen(false);
                  }}
                  conf={{
                    ...child,
                    groupTitle:
                      child?.groupTitle || formatMessage({ id: 'component.CustomLink.all.set' }),
                  }}
                />
              ),
              key: `${key}-group=${j}`,
            })),
          },
        ],
      }}
      trigger={['click']}
    >
      <a>
        <Space
          size={5}
          onClick={() => {
            setOpen(true);
          }}
        >
          {conf.label}
          {conf?.loading ? <Spin size="small" /> : !open ? <DownOutlined /> : <UpOutlined />}
        </Space>
      </a>
    </Dropdown>
  );
};

export default memo(ManualDropdown);