import React, { useState } from 'react'

import { Select, SelectOption as Option, SelectOptionGroup as OptionGroup } from 'react-icecream'

export default function Demo() {
  const [product, setProduct] = useState<Product | null>(null)

  return (
    <Select searchable clearable value={product} onChange={setProduct} placeholder="请选择产品">
      {categories.map(category => (
        <OptionGroup<Product> key={category} title={categoryNameMap[category]}>
          {categoryProductsMap[category].map(p => (
            <Option<Product> key={product} value={p}>{productNameMap[p]}</Option>
          ))}
        </OptionGroup>
      ))}
    </Select>
  )
}

enum Product {
  Kodo = 'kodo',
  Archive = 'archive',
  Hdfs = 'hdfs',
  Cdn = 'qcdn',
  Ssl = 'ssl',
  Pili = 'pili',
  Qvm = 'qvm',
  CloudSql = 'cloudSql',
  Ddos = 'ddos',
  Sms = 'sms',
  Dora = 'dora',
  Censor = 'censor',
  FaceID = 'faceid',
  Rtn = 'rtn',
  Plsv = 'plsv',
  Plms = 'plms',
  Insight = 'insight',
  Express = 'express',
  Qvs = 'qvs',
  OpenAPI = 'openapi',
  Ocr = 'ocr',
  Pcdn = 'pcdn',
  Plesdk = 'plesdk',
}

const productNameMap = {
  [Product.Kodo]: '对象存储 Kodo',
  [Product.Archive]: '归档存储',
  [Product.Hdfs]: 'HDFS',
  [Product.Cdn]: 'CDN',
  [Product.Ssl]: 'SSL 证书',
  [Product.Pili]: '视频直播 Pili',
  [Product.Qvm]: '云主机服务 QVM',
  [Product.CloudSql]: '云数据库',
  [Product.Ddos]: 'DDoS 高防',
  [Product.Sms]: '云短信 SMS',
  [Product.Dora]: '智能多媒体服务',
  [Product.Censor]: '内容审核',
  [Product.FaceID]: '人脸核验',
  [Product.Rtn]: '实时音视频',
  [Product.Plsv]: '短视频 SDK',
  [Product.Plms]: '直播推流 SDK',
  [Product.Insight]: '智能日志管理平台',
  [Product.Express]: '机器数据分析平台 Pandora',
  [Product.Qvs]: '视频监控 QVS',
  [Product.OpenAPI]: 'Open API',
  [Product.Ocr]: '票证自动识别 OCR',
  [Product.Pcdn]: 'PCDN',
  [Product.Plesdk]: '直播特效 SDK'
} as const

enum Category {
  Service = 'service',
  Vision = 'vision',
  Intelligence = 'intelligence'
}

/** 基础服务 */
const categoryService = [
  Product.Qvm,
  Product.Kodo,
  Product.CloudSql,
  Product.Archive,
  Product.Cdn,
  Product.Pcdn,
  Product.Ssl,
  Product.Ddos,
  Product.Sms
] as const

/** 视觉数据智能 */
const categoryVision = [
  Product.Dora,
  Product.Censor,
  Product.FaceID,
  Product.Ocr,
  Product.Pili,
  Product.Rtn,
  Product.Plsv,
  Product.Plms,
  Product.Qvs
] as const

/** 机器数据智能 */
const categoryIntelligence = [
  Product.Express
] as const

const categoryProductsMap: { [c in Category]: readonly Product[] } = {
  [Category.Service]: categoryService,
  [Category.Vision]: categoryVision,
  [Category.Intelligence]: categoryIntelligence
}

const categoryNameMap = {
  [Category.Service]: '基础服务',
  [Category.Vision]: '视觉数据智能',
  [Category.Intelligence]: '机器数据智能'
} as const

const categories = [
  Category.Service,
  Category.Vision,
  Category.Intelligence
] as const