import React, {
  useState
} from 'react';

import {
  CheckboxGroupComponent,
  Checkbox
} from '@alicloud/console-components';
import {
  H3,
  CodeViewerJson
} from '@alicloud/demo-rc-elements';

import {
  IDemoDataRegion,
  ITestingProps
} from '../../types';
import {
  DATA_SOURCE_PURE_STRING,
  DATA_SOURCE_PURE_NUMBER,
  DATA_SOURCE_REGION_WRAPPED
} from '../../const';

export default function Testing({
  component
}: ITestingProps<CheckboxGroupComponent>): JSX.Element {
  const CheckboxGroup = component;
  
  const [stateChangedValue, setStateChangedValue] = useState<unknown>(null);
  const [stateValueStringMulti, setStateValueStringMulti] = useState<string[]>(DATA_SOURCE_PURE_STRING.slice(0, 1));
  const [stateValueNumberMulti, setStateValueNumberMulti] = useState<number[]>(DATA_SOURCE_PURE_NUMBER.slice(0, 1));
  const [stateValueRegionMulti, setStateValueRegionMulti] = useState<IDemoDataRegion[]>([]);
  const [stateValueStringMulti2, setStateValueStringMulti2] = useState<string[]>(DATA_SOURCE_PURE_STRING.slice(0, 1));
  
  return (
    <>
      <CodeViewerJson>
        {stateChangedValue
          ? JSON.stringify(stateChangedValue, null, 2)
          : "null"}
      </CodeViewerJson>
      <H3>字符串</H3>
      <CheckboxGroup
        {...{
          dataSource: DATA_SOURCE_PURE_STRING,
          value: stateValueStringMulti,
          onChange: (value) => {
            setStateValueStringMulti(value);
            setStateChangedValue(value);
          },
        }}
      />
      <H3>数值</H3>
      <CheckboxGroup<number>
        {...{
          dataSource: DATA_SOURCE_PURE_NUMBER,
          value: stateValueNumberMulti,
          onChange: (value) => {
            setStateValueNumberMulti(value);
            setStateChangedValue(value);
          },
        }}
      />
      <H3>对象</H3>
      <CheckboxGroup<IDemoDataRegion>
        {...{
          dataSource: DATA_SOURCE_REGION_WRAPPED,
          value: stateValueRegionMulti,
          onChange: (value) => {
            setStateValueRegionMulti(value);
            setStateChangedValue(value);
          },
        }}
      />
      <H3>CheckboxGroup 内嵌 Checkbox</H3>
      <CheckboxGroup
        {...{
          value: stateValueStringMulti2,
          onChange: (value) => {
            setStateValueStringMulti2(value);
            setStateChangedValue(value);
          },
        }}
      >
        {DATA_SOURCE_PURE_STRING.map((value) => (
          <Checkbox key={value} value={value}>
            {value}
          </Checkbox>
        ))}
      </CheckboxGroup>
    </>
  );
}