import React, { useState } from 'react'

import { RawTable, RawThead, RawTbody, RawTr, RawTh, RawTd, Form, FormItem, Select, SelectOption, Switch } from 'react-icecream'

import { ComponentSize } from '../../ConfigProvider'

export default function Demo() {
  const [size, sizeInput] = useSizeInput('default')
  const [border, borderInput] = useBorderInput('row')
  const [zebra, zebraInput] = useZebraInput(false)
  return (
    <section>
      <Form layout="inline" footer={null}>
        <FormItem label="尺寸">
          {sizeInput}
        </FormItem>
        <FormItem label="边框">
          {borderInput}
        </FormItem>
        <FormItem label="斑马纹">
          {zebraInput}
        </FormItem>
      </Form>
      <RawTable size={size} border={border} zebra={zebra}>
        <RawThead>
          <RawTr>
            <RawTh>流量包规格</RawTh>
            <RawTh>标准直播</RawTh>
            <RawTh>低延时直播</RawTh>
          </RawTr>
        </RawThead>
        <RawTbody>
          <RawTr>
            <RawTd>100GB</RawTd>
            <RawTd>25.00 元/年</RawTd>
            <RawTd>40.00 元/年</RawTd>
          </RawTr>
          <RawTr>
            <RawTd>500GB</RawTd>
            <RawTd>116.00 元/年</RawTd>
            <RawTd>185.60 元/年</RawTd>
          </RawTr>
          <RawTr>
            <RawTd>1T</RawTd>
            <RawTd>232.00 元/年</RawTd>
            <RawTd>371.20 元/年</RawTd>
          </RawTr>
        </RawTbody>
      </RawTable>
    </section>
  )
}

function useSizeInput(defaultValue?: ComponentSize) {
  const [value, setValue] = useState(defaultValue)
  const view = (
    <Select style={{ width: '100px' }} value={value} onChange={v => setValue(v ?? undefined)}>
      <SelectOption value="default">默认</SelectOption>
      <SelectOption value="small">小</SelectOption>
    </Select>
  )
  return [value, view] as const
}

function useBorderInput(defaultValue?: 'row' | 'full' | 'none') {
  const [value, setValue] = useState(defaultValue)
  const view = (
    <Select style={{ width: '160px' }} value={value} onChange={v => setValue(v ?? undefined)}>
      <SelectOption value="row">行之间边框</SelectOption>
      <SelectOption value="full">全边框</SelectOption>
      <SelectOption value="none">无边框</SelectOption>
    </Select>
  )
  return [value, view] as const
}

function useZebraInput(defaultValue: boolean) {
  const [value, setValue] = useState(defaultValue)
  const view = <Switch checked={value} onChange={setValue} />
  return [value, view] as const
}