import { Checkbox, Input, Popconfirm, Space, Typography } from 'antd';
import { ConfigProvider, Table } from 'antd5';
import { memo, useMemo } from 'react';
import { FormattedMessage } from 'umi';
import PermissionParentShow from '../../PermissionParentShow';
import { leafBuildTree, treeLeafNode } from '../../utils/array';
import { requestBatchUnbind } from '../api';
import style from './index.less';

const { Text } = Typography;

export interface RoleList {
  isOptShow?: boolean;
  DataSensitiveMap?: any;
  DataSensitiveLevelMap?: any;
  setOpenObj?: any;
  params?: any;
  setParams?: any;
  formatMessage?: any;
  moment?: any;
  appId?: any;
  setRenewalParams?: any;
  currentUser?: any;
  batchParams?: any;
  setBatchParams?: any;
  data?: any;
  permission?: any;
  run?: any;
  showSelected?: boolean;
}

const RoleListTable = (props: RoleList) => {
  const {
    isOptShow,
    DataSensitiveMap,
    DataSensitiveLevelMap,
    setOpenObj,
    params,
    setParams,
    formatMessage,
    moment,
    appId,
    setRenewalParams,
    currentUser,
    batchParams,
    setBatchParams,
    data,
    permission,
    run,
    showSelected,
  } = props;

  const roleListColumn = [
    {
      title: <FormattedMessage id="base.common.role.permission" defaultMessage="角色权限" />,
      dataIndex: 'name',
      ellipsis: true,
      render: (__: any, record: any) => {
        return (
          <PermissionParentShow
            data={{
              ...record,
              ownerName: record?.createUserName,
              ownerId: record?.createUserId,
              ownerState: record?.createUserState,
            }}
          >
            <Typography.Text ellipsis={{ tooltip: { placement: 'right' } }}>
              {record.name}
            </Typography.Text>
          </PermissionParentShow>
        );
      },
    },
    {
      title: <FormattedMessage id="pages.funcList.sensitiveLevel" defaultMessage="敏感等级" />,
      dataIndex: 'dataSensitive',
      ellipsis: true,
      render: (__: any, record: any) => {
        return (
          <Text ellipsis={{ tooltip: true }}>
            {DataSensitiveLevelMap[record?.dataSensitive]?.text}
          </Text>
        );
      },
    },
    {
      title: <FormattedMessage id="pages.funcList.sensitivity" defaultMessage="敏感度" />,
      dataIndex: 'sensitiveLevel',
      ellipsis: true,
      render: (__: any, record: any) => {
        return (
          <Text ellipsis={{ tooltip: true }}>{DataSensitiveMap[record.sensitiveLevel]?.text}</Text>
        );
      },
    },
    {
      title: <FormattedMessage id="pages.process.expiration" defaultMessage="有效期" />,
      dataIndex: 'expiredAt',
      ellipsis: true,
      render: (__: any, record: any) => {
        return record.hasOwnProperty('expiredAt') ? (
          <Text ellipsis={{ tooltip: true }}>
            {record.expiredAt == 0
              ? formatMessage({ id: 'pages.setting.base.defaultExpirationTime.forever' })
              : record.expiredAt < 0
              ? '-'
              : moment().valueOf() < record.expiredAt * 1000
              ? moment(record.expiredAt * 1000).format('YYYY-MM-DD HH:mm:ss')
              : `${moment(record.expiredAt * 1000).format('YYYY-MM-DD HH:mm:ss')}(${formatMessage({
                  id: 'base.expiredAted',
                })})`}
          </Text>
        ) : null;
      },
    },
    {
      title: (
        <div style={{ textAlign: 'center' }}>
          <FormattedMessage id="base.permission.operation" defaultMessage="操作" />
        </div>
      ),
      dataIndex: 'permissionOption',
      fixed: 'right',
      hidden: !isOptShow,
      render: (__: any, record: any) => [
        <>
          <Space>
            {record?.isBind ? (
              <Popconfirm
                key={`del${record.id}`}
                title={formatMessage({ id: 'pages.unbind.confirm' })}
                onConfirm={async () => {
                  try {
                    const allSettledPromise = requestBatchUnbind(
                      { roleList: [record.id] },
                      currentUser,
                      appId,
                      formatMessage,
                    );
                    if (allSettledPromise) {
                      allSettledPromise.then(() => {
                        run();
                      });
                    }
                  } catch (error) {}
                }}
              >
                <a>
                  <FormattedMessage id="pages.unbind" />
                </a>
              </Popconfirm>
            ) : null}
            {record?.expiredAt < 0 || record?.isAllowApply === 0 || !record?.isBind ? null : (
              <a
                key={`renewal${record.id}`}
                onClick={() => {
                  setRenewalParams({ roleList: [record.id] });
                  setOpenObj({ open: true, reload: false });
                }}
              >
                <FormattedMessage id="base.renewal" />
              </a>
            )}
          </Space>
        </>,
      ],
    },
  ];

  const dataSource = useMemo(() => {
    const list = permission?.roleList ?? data?.roleList ?? [];
    if (!showSelected) return list;
    const leaf = treeLeafNode(list, (v) => {
      return v.isBind;
    }).map((v) => v.id);
    return leafBuildTree(leaf, list);
  }, [data?.roleList, permission?.roleList, showSelected]);

  if (!data?.roleList?.length) return null;

  return (
    <div>
      {Boolean(isOptShow) && (
        <Space className={style.permission_name}>
          <label style={{ whiteSpace: 'nowrap' }}>
            {formatMessage({ id: 'page.process.permission.name' })}
          </label>
          <Input
            placeholder={''}
            value={params?.roleList}
            onChange={(val) => {
              setParams({ ...params, roleList: val.target.value });
            }}
            style={{ width: 200 }}
          />
        </Space>
      )}

      <ConfigProvider
        theme={{
          token: {
            colorPrimary: '#F16622',
            colorLink: '#F16622',
          },
        }}
      >
        <Table
          rowKey={'id'}
          virtual
          scroll={{ y: 400 }}
          rowSelection={
            isOptShow
              ? {
                  columnWidth: 50,
                  selectedRowKeys: batchParams?.roleList,
                  onChange: (rowKey) => {
                    setBatchParams((key) => {
                      return { ...key, roleList: rowKey };
                    });
                  },
                  getCheckboxProps: (record: any) => ({
                    disabled:
                      record?.expiredAt < 0 || record?.isAllowApply === 0 || !record?.isBind,
                  }),
                }
              : {
                  columnWidth: 50,
                  hideSelectAll: true,
                  renderCell: (checked, record: any) => {
                    return <Checkbox disabled checked={record.isBind} />;
                  },
                }
          }
          columns={roleListColumn as any}
          pagination={false}
          dataSource={dataSource}
        />
      </ConfigProvider>
    </div>
  );
};
export default memo(RoleListTable);