import type { ProColumns } from '@ant-design/pro-components';
import { Access } from '@umijs/max';
import { Space, Tag, Typography } from 'antd';
import { formatPrice } from './constants';
import type { ProductItem } from './data';

const { Text } = Typography;

type IntlLike = {
  formatMessage: (descriptor: { id: string; defaultMessage: string }) => string;
};

type ProductColumnsParams = {
  intl: IntlLike;
  statusEnum: Record<string, { text: string; status: string }>;
  categoryOptions: { label: string; value: string }[];
  canEdit: boolean;
  canDelete: (record: ProductItem) => boolean;
  errorColor: string;
  onEdit: (record: ProductItem) => void;
  onDelete: (record: ProductItem) => void;
};

export const createProductColumns = ({
  intl,
  statusEnum,
  categoryOptions,
  canEdit,
  canDelete,
  errorColor,
  onEdit,
  onDelete,
}: ProductColumnsParams): ProColumns<ProductItem>[] => {
  return [
    {
      title: intl.formatMessage({
        id: 'pages.product.columns.name',
        defaultMessage: '商品名称',
      }),
      dataIndex: 'name',
      ellipsis: true,
      render: (_, record) => <Text strong>{record.name}</Text>,
    },
    {
      title: intl.formatMessage({
        id: 'pages.product.columns.category',
        defaultMessage: '分类',
      }),
      dataIndex: 'category',
      valueType: 'select',
      valueEnum: Object.fromEntries(
        categoryOptions.map((item) => [item.value, { text: item.label }]),
      ),
    },
    {
      title: intl.formatMessage({
        id: 'pages.product.columns.salePrice',
        defaultMessage: '售价',
      }),
      dataIndex: 'salePrice',
      valueType: 'money',
      render: (_, record) => `￥${formatPrice(record.salePrice)}`,
      search: false,
    },
    {
      title: intl.formatMessage({
        id: 'pages.product.columns.stock',
        defaultMessage: '库存',
      }),
      dataIndex: 'stock',
      search: false,
      render: (_, record) => {
        const isOutStock = record.stock === 0;
        const isLowStock = !isOutStock && record.stock < record.safetyStock;
        return (
          <Space size={8}>
            <Text type={isOutStock || isLowStock ? 'danger' : undefined}>
              {record.stock}
            </Text>
            {isOutStock ? (
              <Tag color="red">
                {intl.formatMessage({
                  id: 'pages.product.stock.out',
                  defaultMessage: '缺货',
                })}
              </Tag>
            ) : null}
            {isLowStock ? (
              <Tag color="orange">
                {intl.formatMessage({
                  id: 'pages.product.stock.warning',
                  defaultMessage: '库存预警',
                })}
              </Tag>
            ) : null}
          </Space>
        );
      },
    },
    {
      title: intl.formatMessage({
        id: 'pages.product.columns.status',
        defaultMessage: '状态',
      }),
      dataIndex: 'status',
      valueType: 'select',
      valueEnum: statusEnum,
    },
    {
      title: intl.formatMessage({
        id: 'pages.product.columns.option',
        defaultMessage: '操作',
      }),
      valueType: 'option',
      render: (_, record) => [
        <Access key="edit-access" accessible={canEdit} fallback={null}>
          <a onClick={() => onEdit(record)}>
            {intl.formatMessage({ id: 'common.edit', defaultMessage: '编辑' })}
          </a>
        </Access>,
        <Access
          key="delete-access"
          accessible={canDelete(record)}
          fallback={null}
        >
          <a style={{ color: errorColor }} onClick={() => onDelete(record)}>
            {intl.formatMessage({
              id: 'common.delete',
              defaultMessage: '删除',
            })}
          </a>
        </Access>,
      ],
    },
  ];
};
