import { ApiOutlined, DatabaseOutlined, EyeOutlined, ShoppingOutlined } from "@ant-design/icons"
import { Card, Col, Row, Statistic, theme } from "antd"
import { useMemo } from "react"
import type { Product } from "../api/product"

interface Props {
  products: Product[]
  loading: boolean
}

export default function ProductStatsCards({ products, loading }: Props) {
  const { token } = theme.useToken()
  const stats = useMemo(() => {
    const active = products.filter((product) => product.status === "active").length
    const autoProvision = products.filter((product) => product.auto_provision).length
    const apiBound = products.filter((product) => product.api_type !== "none").length
    return { active, autoProvision, apiBound }
  }, [products])

  return (
    <Row gutter={[16, 16]}>
      <Col xs={24} sm={12} xl={6}>
        <Card variant="outlined" loading={loading}>
          <Statistic title="当前组产品" value={products.length} suffix="个" prefix={<ShoppingOutlined />} />
        </Card>
      </Col>
      <Col xs={24} sm={12} xl={6}>
        <Card variant="outlined" loading={loading}>
          <Statistic
            title="在售产品"
            value={stats.active}
            suffix="个"
            prefix={<EyeOutlined />}
            styles={{ content: { color: token.colorSuccess } }}
          />
        </Card>
      </Col>
      <Col xs={24} sm={12} xl={6}>
        <Card variant="outlined" loading={loading}>
          <Statistic
            title="自动开通"
            value={stats.autoProvision}
            suffix="个"
            prefix={<ApiOutlined />}
            styles={{ content: { color: token.colorPrimary } }}
          />
        </Card>
      </Col>
      <Col xs={24} sm={12} xl={6}>
        <Card variant="outlined" loading={loading}>
          <Statistic title="已绑上游" value={stats.apiBound} suffix="个" prefix={<DatabaseOutlined />} />
        </Card>
      </Col>
    </Row>
  )
}
