import { DownOutlined } from '@ant-design/icons';
import { Access, FormattedMessage, useAccess } from '@umijs/max';
import { Button, Dropdown, Space } from 'antd';
import React from 'react';

interface PermissionButtonGroup {
  buttonKey: string;
  buttonRender?: React.ReactNode;
}

interface MorePremissBtnProps {
  btnGroups: PermissionButtonGroup[];
}

const MorePremissBtn: React.FC<MorePremissBtnProps> = ({ btnGroups }) => {
  const access = useAccess();

  const buttonArr = btnGroups.filter(({ buttonKey }) => access[buttonKey]);
  const menuItemRender: any =
    buttonArr.length > 4
      ? buttonArr.slice(3).map(({ buttonKey, buttonRender }) => ({
          key: buttonKey,
          label: (
            <Access
              accessible={access[buttonKey]}
              fallback={null}
              key={buttonKey}
            >
              {buttonRender}
            </Access>
          ),
        }))
      : [];
  return (
    <Space size="small">
      {buttonArr.slice(0,buttonArr.length===4?4:3).map(({ buttonKey, buttonRender }) => (
        <Access accessible={access[buttonKey]} fallback={null} key={buttonKey}>
          {buttonRender}
        </Access>
      ))}

      {menuItemRender.length > 0 && (
        <Dropdown
          menu={{
            items: menuItemRender,
          }}
          trigger={['click']}
        >
          <Button type="link">
            <FormattedMessage id="columns.handel.more" defaultMessage="更多" />{' '}
            <DownOutlined />
          </Button>
        </Dropdown>
      )}
    </Space>
  );
};

export default MorePremissBtn;