import React, {
  useState
} from 'react';

import {
  RadioGroupComponent,
  Radio,
} from '@alicloud/console-components';
import {
  H3,
  Alert,
  CodeViewerJson
} from '@alicloud/demo-rc-elements';

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

export default function Testing({
  component
}: ITestingProps<RadioGroupComponent>): JSX.Element {
  const RadioGroup = component;
  
  const [stateChangedValue, setStateChangedValue] = useState<unknown>(null);
  const [stateValueString, setStateValueString] = useState<string>(DATA_SOURCE_PURE_STRING[0]!);
  const [stateValueNumber, setStateValueNumber] = useState<number>(DATA_SOURCE_PURE_NUMBER[0]!);
  const [stateValueBoolean, setStateValueBoolean] = useState<boolean>(true);
  const [stateValueRegion, setStateValueRegion] = useState<IDemoDataRegion | null>(null);
  const [stateValueString2, setStateValueString2] = useState<string>(DATA_SOURCE_PURE_STRING[0]!);
  
  return <>
    <CodeViewerJson>{stateChangedValue ? JSON.stringify(stateChangedValue, null, 2) : 'null'}</CodeViewerJson>
    <H3>字符串</H3>
    <RadioGroup {...{
      dataSource: DATA_SOURCE_PURE_STRING,
      value: stateValueString,
      onChange: value => {
        setStateValueString(value);
        setStateChangedValue(value);
      }
    }} />
    <H3>数值</H3>
    <RadioGroup<number> {...{
      dataSource: DATA_SOURCE_PURE_NUMBER,
      value: stateValueNumber,
      onChange: value => {
        setStateValueNumber(value);
        setStateChangedValue(value);
      }
    }} />
    <H3>Boolean</H3>
    <Alert type="warning" title="PropType 警告">无法渲染 label，报错「Warning: Failed prop type: Invalid prop `label` supplied to `Radio`, expected a ReactNode.」</Alert>
    <RadioGroup<boolean> {...{
      dataSource: DATA_SOURCE_PURE_BOOLEAN,
      value: stateValueBoolean,
      onChange: value => {
        setStateValueBoolean(value);
        setStateChangedValue(value);
      }
    }} />
    <H3>对象</H3>
    <Alert type="warning" title="PropType 警告">无法渲染 label，报错「Warning: Failed context type: Invalid context `selectedValue` supplied to `Radio`, expected one of type [string, number, boolean].」</Alert>
    <RadioGroup<IDemoDataRegion | null> {...{
      dataSource: DATA_SOURCE_REGION_WRAPPED,
      value: stateValueRegion,
      onChange: value => {
        setStateValueRegion(value);
        setStateChangedValue(value);
      }
    }} />
    <H3>RadioGroup 内嵌 Radio</H3>
    <RadioGroup {...{
      value: stateValueString2,
      onChange: value => {
        setStateValueString2(value);
        setStateChangedValue(value);
      }
    }}>
      {DATA_SOURCE_PURE_STRING.map(value => (
        <Radio key={value} value={value}>
          {value}
        </Radio>
      ))}
    </RadioGroup>
  </>;
}