/**
 * debug: true
 */

import React from 'react'
import { CheckboxGroup, Checkbox, CheckAll, RadioGroup, Radio } from 'react-icecream'

const options = [
  { value: 'A' },
  { value: 'B', disabled: true },
  { value: 'C', disabled: false },
  { value: 'D' }
]

export default function GroupDemo() {
  const [checkboxGroupDisabled, checkboxGroupDisabledCtlView] = useBooleanRadioGroup(undefined)
  const [checkAllDisabled, checkAllDisabledCtlView] = useBooleanRadioGroup(undefined)
  return (
    <div>
      <CheckboxGroup disabled={checkboxGroupDisabled} defaultValue={['A', 'B']}>
        <CheckAll disabled={checkAllDisabled} /><br /><br />
        {options.map(o => <Checkbox key={o.value} value={o.value} disabled={o.disabled}>{o.value}</Checkbox>)}
      </CheckboxGroup>
      <div style={{ display: 'grid', gridTemplateColumns: 'auto auto', gap: '16px', borderTop: '1px solid #ebedf1', marginTop: '16px', paddingTop: '16px', lineHeight: '32px' }}>
        <div>控制 CheckboxGroup 的 disabled：</div>
        <div>{checkboxGroupDisabledCtlView}</div>
        <div>控制 CheckAll 的 disabled：</div>
        <div>{checkAllDisabledCtlView}</div>
      </div>
    </div>
  )
}

function useBooleanRadioGroup(initialState: boolean | undefined) {
  type Value = 'undefined' | 'true' | 'false'
  const [state, setState] = React.useState(initialState)

  const value = String(state) as Value
  function handleChange(newValue: Value) {
    setState({
      undefined,
      true: true,
      false: false
    }[newValue])
  }

  const view = (
    <RadioGroup<Value> radioType="button" value={value} onChange={handleChange}>
      <Radio value="undefined">undefined</Radio>
      <Radio value="true">true</Radio>
      <Radio value="false">false</Radio>
    </RadioGroup>
  )

  return [state, view] as const
}