import {
  ProFormSelect,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';
import { theme } from 'antd';
import React from 'react';
import type { ProductSearchValues } from '../data';

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

type ProductSearchProps = {
  intl: IntlLike;
  categoryOptions: { label: string; value: string }[];
  statusEnum: Record<string, { text: string; status: string }>;
  onFinish: (values: ProductSearchValues) => void;
};

const ProductSearch: React.FC<ProductSearchProps> = ({
  intl,
  categoryOptions,
  statusEnum,
  onFinish,
}) => {
  const { token } = theme.useToken();

  return (
    <QueryFilter<ProductSearchValues>
      layout="vertical"
      onFinish={async (values) => {
        onFinish(values);
      }}
      style={{
        background: token.colorBgContainer,
        padding: token.paddingLG,
        marginBottom: token.marginLG,
        borderRadius: token.borderRadius,
      }}
    >
      <ProFormText
        name="name"
        label={intl.formatMessage({
          id: 'pages.product.search.name',
          defaultMessage: '商品名称',
        })}
      />
      <ProFormSelect
        name="category"
        label={intl.formatMessage({
          id: 'pages.product.search.category',
          defaultMessage: '分类',
        })}
        options={categoryOptions}
      />
      <ProFormText
        name="sku"
        label={intl.formatMessage({
          id: 'pages.product.search.sku',
          defaultMessage: 'SKU',
        })}
      />
      <ProFormSelect
        name="status"
        label={intl.formatMessage({
          id: 'pages.product.search.status',
          defaultMessage: '状态',
        })}
        valueEnum={statusEnum}
      />
      <ProFormSelect
        name="stockWarning"
        label={intl.formatMessage({
          id: 'pages.product.search.stockWarning',
          defaultMessage: '库存筛选',
        })}
        options={[
          {
            label: intl.formatMessage({
              id: 'pages.product.search.stockWarning.all',
              defaultMessage: '全部',
            }),
            value: 'all',
          },
          {
            label: intl.formatMessage({
              id: 'pages.product.search.stockWarning.warning',
              defaultMessage: '库存预警',
            }),
            value: 'warning',
          },
          {
            label: intl.formatMessage({
              id: 'pages.product.search.stockWarning.empty',
              defaultMessage: '仅缺货',
            }),
            value: 'empty',
          },
        ]}
      />
    </QueryFilter>
  );
};

export default ProductSearch;
