import { BindAllPermission, Tips } from '@/components';
import ExpandIcon from '@/components/ExpandIcon';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Table, Tooltip, Typography } from 'antd';
import type { ColumnsType } from 'antd/lib/table';
import _ from 'lodash';
import moment from 'moment';
import { useMemo } from 'react';
import { FormattedMessage, useIntl } from 'umi';
import publicConst from '../../utils/const';

const { DataSensitiveLevelTips, DataSensitiveTips } = Tips;

export interface PackageCardProps {
  dataSource: any[];
  type: 'feature' | 'option' | 'policy' | 'role' | 'city';
}

const PackageCard = (props: PackageCardProps) => {
  const { dataSource, type } = props;

  const { formatMessage } = useIntl();

  const columns = useMemo<ColumnsType<any>>(() => {
    const { DataSensitiveMap, DataSensitiveLevelMap } = publicConst(formatMessage);

    return [
      {
        title: formatMessage({ id: `base.common.${type}.permission` }),
        dataIndex: 'name',
        width: 400,
        render: (__, record) => {
          const { id, name, appId } = record;
          return (
            <>
              <Tooltip title={name}>
                <span>{name}</span>
              </Tooltip>

              {type === 'role' && (
                <BindAllPermission
                  appId={appId}
                  roleId={id}
                  roleName={name}
                  iconStyle={{ padding: '0 4px' }}
                />
              )}
            </>
          );
        },
      },
      {
        title: <FormattedMessage id={'base.app.name'} />,
        dataIndex: 'appName',
        width: 400,
      },
      {
        title: (
          <>
            {formatMessage({ id: 'pages.funcList.sensitiveLevel' })}
            <Tooltip title={DataSensitiveLevelTips.title()}>
              <Typography.Text type={'warning'} style={{ marginLeft: 4 }}>
                <ExclamationCircleOutlined />
              </Typography.Text>
            </Tooltip>
          </>
        ),
        dataIndex: 'dataSensitive',
        render: (__, record) => DataSensitiveLevelMap[record.dataSensitive]?.text ?? '',
      },
      {
        title: (
          <>
            {formatMessage({ id: 'pages.funcList.sensitivity' })}
            <Tooltip title={DataSensitiveTips.title()}>
              <Typography.Text type={'warning'} style={{ marginLeft: 4 }}>
                <ExclamationCircleOutlined />
              </Typography.Text>
            </Tooltip>
          </>
        ),
        dataIndex: 'sensitiveLevel',
        render: (__, record) => DataSensitiveMap[record.sensitiveLevel]?.text ?? '',
      },
      {
        title: formatMessage({ id: 'pages.process.expiration' }),
        dataIndex: 'expiredAt',
        render: (__, record) => {
          const { expiredAt } = record ?? {};
          return (
            _.isNumber(expiredAt) && (
              <Typography.Text ellipsis={{ tooltip: true }}>
                {expiredAt === 0
                  ? formatMessage({ id: 'pages.setting.base.defaultExpirationTime.forever' })
                  : moment(expiredAt * 1000).format('YYYY-MM-DD HH:mm:ss')}
              </Typography.Text>
            )
          );
        },
      },
    ];
  }, [formatMessage, type]);

  return (
    <Table
      size={'small'}
      expandable={{
        defaultExpandAllRows: true,
        expandIcon: ExpandIcon,
      }}
      rowKey={(row) => [row.id, row.uniqueKey, row.uacAuditId].filter((k) => !!k).join('_')}
      columns={columns}
      pagination={false}
      dataSource={dataSource}
    />
  );
};

export default PackageCard;