import { queryProductList } from '@/services/product';
import { ShoppingCartOutlined } from '@ant-design/icons';
import { PageContainer, ProList } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Button, Space, Tag, theme, Typography } from 'antd';
import React from 'react';
import type { ProductItem } from './data';

const { Text } = Typography;

const ProductGallery: React.FC = () => {
  const { token } = theme.useToken();
  const intl = useIntl();

  return (
    <PageContainer header={{ title: false }}>
      <ProList<ProductItem>
        pagination={{
          defaultPageSize: 8,
          showSizeChanger: true,
        }}
        grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
        showActions="hover"
        ghost={true}
        metas={{
          title: {
            dataIndex: 'name',
            title: intl.formatMessage({
              id: 'pages.product.columns.name',
              defaultMessage: '产品名称',
            }),
          },
          subTitle: {
            dataIndex: 'category',
            title: intl.formatMessage({
              id: 'pages.product.columns.category',
              defaultMessage: '分类',
            }),
            valueType: 'select',
            valueEnum: {
              数码: { text: '数码' },
              外设: { text: '外设' },
              家电: { text: '家电' },
            },
            render: (text) => <Tag color="blue">{text}</Tag>,
          },
          avatar: {
            dataIndex: 'imageUrl',
            search: false,
          },
          description: {
            dataIndex: 'description',
            search: false,
            render: (text) => (
              <Text type="secondary" ellipsis={{ tooltip: text }}>
                {text || (
                  <FormattedMessage
                    id="common.noDescription"
                    defaultMessage="暂无描述"
                  />
                )}
              </Text>
            ),
          },
          content: {
            search: false,
            render: (_, row) => (
              <div style={{ marginTop: 12 }}>
                <Text type="danger" strong style={{ fontSize: 18 }}>
                  ￥{row.price}
                </Text>
              </div>
            ),
          },
          actions: {
            cardActionProps: 'actions',
            render: () => [
              <Button type="link" key="view">
                <FormattedMessage id="common.view" defaultMessage="查看" />
              </Button>,
              <Button type="primary" size="small" key="buy">
                <FormattedMessage id="common.buy" defaultMessage="购买" />
              </Button>,
            ],
          },
        }}
        headerTitle={
          <Space>
            <ShoppingCartOutlined style={{ color: token.colorPrimary }} />
            <FormattedMessage
              id="menu.product-gallery"
              defaultMessage="商品展示"
            />
          </Space>
        }
        request={async (params) => {
          const response = await queryProductList(params);

          return response;
        }}
        search={{
          layout: 'vertical',
          defaultCollapsed: false,
          style: {
            background: token.colorBgContainer,
            padding: token.padding,
            borderRadius: token.borderRadius,
            marginBottom: token.marginLG,
          },
        }}
      />
    </PageContainer>
  );
};

export default ProductGallery;
