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

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

interface MorePremissBtnProps {
  btnGroups: PermissionButtonGroup[];
}

const MorePremissBtn: React.FC<MorePremissBtnProps> = ({ btnGroups }) => {
  const { access } = useModel('@@qiankunStateFromMaster').globalState;

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

  return (
    <Space size="small">
      {buttonArr.slice(0, 4).map(({ buttonKey, buttonRender }) => (
        <Access accessible={access[buttonKey]} fallback={null} key={buttonKey}>
          {buttonRender}
        </Access>
      ))}

      {menuItemRender.length > 0 && <Dropdown
        menu={menuItemRender}
      >
        <Button type="link">
          <FormattedMessage id="columns.handel.more" defaultMessage="更多" /> <DownOutlined />
        </Button>
      </Dropdown>}
    </Space>
  );
};

export default MorePremissBtn;