import React, {
  useState
} from 'react';

import {
  SelectComponent
} from '@alicloud/console-components';
import {
  H3,
  H4,
  P,
  CodeViewerJson
} from '@alicloud/demo-rc-elements';

import {
  IDemoDataAlbum,
  ITestingProps
} from '../../types';
import {
  DATA_SOURCE_PURE_STRING,
  DATA_SOURCE_PURE_NUMBER,
  DATA_SOURCE_ALBUM_WRAPPED
} from '../../const';

export default function Testing({
  component
}: ITestingProps<SelectComponent>): JSX.Element {
  const Select = component;
  
  const [stateChangedValue, setStateChangedValue] = useState<unknown>(null);
  const [stateValueString, setStateValueString] = useState<string>(DATA_SOURCE_PURE_STRING[0]!); // eslint-disable-line @typescript-eslint/no-non-null-assertion
  const [stateValueStringMulti, setStateValueStringMulti] = useState<string[]>(DATA_SOURCE_PURE_STRING.slice(0, 1));
  const [stateValueNumber, setStateValueNumber] = useState<number>(DATA_SOURCE_PURE_NUMBER[0]!); // eslint-disable-line @typescript-eslint/no-non-null-assertion
  const [stateValueNumberMulti, setStateValueNumberMulti] = useState<number[]>(DATA_SOURCE_PURE_NUMBER.slice(0, 1));
  const [stateValueAlbum, setStateValueAlbum] = useState<IDemoDataAlbum>();
  const [stateValueAlbumMulti, setStateValueAlbumMulti] = useState<IDemoDataAlbum[]>([]);
  
  return <>
    <H3>单选/多选</H3>
    <CodeViewerJson>{stateChangedValue ? JSON.stringify(stateChangedValue, null, 2) : 'null'}</CodeViewerJson>
    <P>无 <code>props.mode</code> 或 <code>props.mode = single</code> 为单选模式，对 value 和 onChange 有类型保护。</P>
    <H4>单选 - 受控 / 非受控</H4>
    <Select {...{
      mode: 'single',
      dataSource: DATA_SOURCE_PURE_STRING,
      value: stateValueString,
      onChange: value => {
        setStateValueString(value);
        setStateChangedValue(value);
      }
    }} />
    <Select {...{
      mode: 'single',
      dataSource: DATA_SOURCE_PURE_STRING,
      onChange: value => {
        setStateValueString(value);
        setStateChangedValue(value);
      }
    }} />
    <H4>多选（mode: multiple） - 受控 / 非受控</H4>
    <P><code>props.mode = multiple</code> 将切换成多选模式，有类型保护</P>
    <Select {...{
      mode: 'multiple',
      dataSource: DATA_SOURCE_PURE_STRING,
      value: stateValueStringMulti,
      onChange: value => {
        setStateValueStringMulti(value);
        setStateChangedValue(value);
      }
    }} />
    <Select {...{
      mode: 'multiple',
      dataSource: DATA_SOURCE_PURE_STRING,
      onChange: value => {
        setStateValueStringMulti(value);
        setStateChangedValue(value);
      }
    }} />
    <H4>多选（mode: tag） - 受控 / 非受控</H4>
    <P><code>props.mode = tag</code> 将切换成多选模式，有类型保护</P>
    <Select {...{
      mode: 'tag',
      dataSource: DATA_SOURCE_PURE_STRING,
      value: stateValueStringMulti,
      onChange: value => {
        setStateValueStringMulti(value);
        setStateChangedValue(value);
      }
    }} />
    <Select {...{
      mode: 'tag',
      dataSource: DATA_SOURCE_PURE_STRING,
      onChange: value => {
        setStateValueStringMulti(value);
        setStateChangedValue(value);
      }
    }} />
    <H3>泛型</H3>
    <Select<number> {...{
      dataSource: DATA_SOURCE_PURE_NUMBER,
      value: stateValueNumber,
      onChange: value => {
        setStateValueNumber(value);
        setStateChangedValue(value);
      }
    }} />
    <Select<number> {...{
      mode: 'multiple',
      dataSource: DATA_SOURCE_PURE_NUMBER,
      value: stateValueNumberMulti,
      onChange: value => {
        setStateValueNumberMulti(value);
        setStateChangedValue(value);
      }
    }} />
    <P><code>Select</code> 难道不支持选对象？</P>
    <Select<IDemoDataAlbum> {...{
      dataSource: DATA_SOURCE_ALBUM_WRAPPED,
      value: stateValueAlbum,
      onChange: value => {
        setStateValueAlbum(value);
        setStateChangedValue(value);
      }
    }} />
    <Select<IDemoDataAlbum> {...{
      mode: 'multiple',
      dataSource: DATA_SOURCE_ALBUM_WRAPPED,
      value: stateValueAlbumMulti,
      onChange: value => {
        setStateValueAlbumMulti(value);
        setStateChangedValue(value);
      }
    }} />
    <Select<IDemoDataAlbum> {...{
      mode: 'tag',
      dataSource: DATA_SOURCE_ALBUM_WRAPPED,
      value: stateValueAlbumMulti,
      onChange: value => {
        setStateValueAlbumMulti(value);
        setStateChangedValue(value);
      }
    }} />
    <P>AutoComplete</P>
    <Select.AutoComplete {...{
      hasClear: true,
      dataSource: DATA_SOURCE_PURE_STRING
    }} />
  </>;
}