import React, {
  useState,
  useCallback
} from 'react';

import {
  DialogProps,
  DialogComponent,
  DialogSize
} from '@alicloud/console-components';
import {
  ChoiceItem,
  Button,
  InputSwitch,
  RadioGroup
} from '@alicloud/demo-rc-elements';

import {
  ITestingProps
} from '../../types';

const dataSourceFooterActions: ChoiceItem<null | string[]>[] = [{
  label: '无',
  value: null
}, {
  label: '空数组',
  value: []
}, {
  label: '[ok, cancel]',
  value: ['ok', 'cancel']
}, {
  label: '[cancel, ok]',
  value: ['cancel', 'ok']
}, {
  label: '[ok]',
  value: ['ok']
}, {
  label: '[cancel]',
  value: ['cancel']
}, {
  label: '[ok, cancel, cancel, ok] ⚠️警告',
  value: ['ok', 'cancel', 'cancel', 'ok']
}, {
  label: '[hello, world] 💥Crash',
  value: ['hello', 'world']
}];

const dataSourceSize: ChoiceItem<null | DialogSize>[] = [{
  label: '无',
  value: null
}, {
  label: 'mini',
  value: 'mini'
}, {
  label: 'small',
  value: 'small'
}, {
  label: 'medium',
  value: 'medium'
}, {
  label: 'large',
  value: 'large'
}];

export default function Testing({
  component
}: ITestingProps<DialogComponent>): JSX.Element {
  const Dialog = component;
  
  const [stateVisible, setStateVisible] = useState(false);
  const [stateSize, setStateSize] = useState<DialogSize | null>(null);
  const [stateFooterActions, setStateFooterActions] = useState<null | string[]>(null);
  const handleDialogOpen = useCallback(() => setStateVisible(true), [setStateVisible]);
  const handleDialogClose = useCallback(() => setStateVisible(false), [setStateVisible]);
  
  return <>
    <InputSwitch {...{
      label: 'props.visible',
      value: stateVisible,
      onChange: setStateVisible
    }} />
    <RadioGroup {...{
      label: 'props.size',
      items: dataSourceSize,
      value: stateSize,
      onChange: setStateSize
    }} />
    <RadioGroup {...{
      label: 'props.footerActions',
      items: dataSourceFooterActions,
      value: stateFooterActions,
      onChange: setStateFooterActions
    }} />
    <Button onClick={handleDialogOpen}>Open</Button>
    <Dialog {...{
      visible: stateVisible,
      title: 'Hello Dialog',
      size: stateSize ?? undefined,
      footerActions: stateFooterActions as DialogProps['footerActions'] ?? undefined,
      onOk: handleDialogClose,
      onCancel: handleDialogClose,
      onClose: handleDialogClose
    }}>
      <p>Start your business here by searching a popular product</p>
    </Dialog>
  </>;
}