import React, {
  HTMLAttributes,
  useState,
  useMemo
} from 'react';

import {
  ButtonProps,
  ButtonComponent
} from '@alicloud/console-components';
import {
  ChoiceItem,
  Hr,
  InputSwitch,
  RadioGroup
} from '@alicloud/demo-rc-elements';

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

function ComponentFn({
  children
}: HTMLAttributes<HTMLDivElement>): JSX.Element {
  return <div data-compoent-fn>{children}</div>;
}

class ComponentClz extends React.Component<HTMLAttributes<HTMLDivElement>> {
  render(): JSX.Element {
    const {
      props: {
        children
      }
    } = this;
    
    return <div data-compoent-class>{children}</div>;
  }
}

enum EComponentChoice {
  NONE,
  BUTTON,
  A,
  SPAN,
  DIV,
  STRING,
  COMPONENT_FN,
  COMPONENT_CLASS,
  TRUE,
  FALSE
}

const dataSource: ChoiceItem<EComponentChoice>[] = [{
  label: '无',
  value: EComponentChoice.NONE
}, {
  label: 'button',
  value: EComponentChoice.BUTTON
}, {
  label: 'a',
  value: EComponentChoice.A
}, {
  label: 'span',
  value: EComponentChoice.SPAN
}, {
  label: 'div',
  value: EComponentChoice.DIV
}, {
  label: 'ComponentFn ⚠️ PropType',
  value: EComponentChoice.COMPONENT_FN
}, {
  label: 'ComponentClz ⚠️ PropType',
  value: EComponentChoice.COMPONENT_CLASS
}, {
  label: 'true 💥CRASH',
  value: EComponentChoice.TRUE
}, {
  label: 'false 💥CRASH',
  value: EComponentChoice.FALSE
}];

export default function TestingPropComponent({
  component
}: ITestingProps<ButtonComponent>): JSX.Element {
  const Button = component;
  
  const [stateComponentChoice, setStateComponentChoice] = useState<EComponentChoice>(EComponentChoice.NONE);
  const [stateDisabled, setStateDisabled] = useState(false);
  const [stateWarning, setStateWarning] = useState(false);
  const [stateLoading, setStateLoading] = useState(false);
  
  const componentProp: ButtonProps['component'] = useMemo((): ButtonProps['component'] => {
    switch (stateComponentChoice) {
      case EComponentChoice.BUTTON:
        return 'button';
      case EComponentChoice.A:
        return 'a';
      case EComponentChoice.SPAN:
        return 'button';
      case EComponentChoice.DIV:
        return 'div';
      case EComponentChoice.STRING:
        return 'x' as unknown as ButtonProps['component']; // 强制通过，未了验证它不可用
      case EComponentChoice.COMPONENT_FN:
        return ComponentFn as unknown as ButtonProps['component']; // 强制通过，未了验证它不可用
      case EComponentChoice.COMPONENT_CLASS:
        return ComponentClz as unknown as ButtonProps['component']; // 强制通过，未了验证它不可用
      case EComponentChoice.TRUE:
        return true as unknown as ButtonProps['component']; // 强制通过，未了验证它不可用
      case EComponentChoice.FALSE:
        return false as unknown as ButtonProps['component']; // 强制通过，未了验证它不可用
      default:
        return undefined;
    }
  }, [stateComponentChoice]);
  
  return <>
    <RadioGroup<EComponentChoice> {...{
      items: dataSource,
      value: stateComponentChoice,
      onChange: setStateComponentChoice
    }} />
    <div>
      <InputSwitch {...{
        label: 'props.disabled',
        value: stateDisabled,
        onChange: setStateDisabled
      }} />
      <InputSwitch {...{
        label: 'props.warning',
        value: stateWarning,
        onChange: setStateWarning
      }} />
      <InputSwitch {...{
        label: 'props.loading',
        value: stateLoading,
        onChange: setStateLoading
      }} />
    </div>
    <Hr />
    <div>
      <Button {...{
        type: 'normal',
        component: componentProp,
        disabled: stateDisabled,
        warning: stateWarning,
        loading: stateLoading
      }}>Normal</Button>
      <Button {...{
        type: 'primary',
        component: componentProp,
        disabled: stateDisabled,
        warning: stateWarning,
        loading: stateLoading
      }}>Primary</Button>
      <Button {...{
        type: 'secondary',
        component: componentProp,
        disabled: stateDisabled,
        warning: stateWarning,
        loading: stateLoading
      }}>Secondary</Button>
      <Button {...{
        type: 'normal',
        component: componentProp,
        disabled: stateDisabled,
        warning: stateWarning,
        loading: stateLoading,
        text: true
      }}>Normal Text</Button>
      <Button {...{
        type: 'primary',
        component: componentProp,
        disabled: stateDisabled,
        warning: stateWarning,
        loading: stateLoading,
        text: true
      }}>Primary Text</Button>
      <Button {...{
        type: 'secondary',
        component: componentProp,
        disabled: stateDisabled,
        warning: stateWarning,
        loading: stateLoading,
        text: true
      }}>Secondary Text</Button>
    </div>
    <Button.Group>
      <Button type="primary">OK</Button>
      <Button type="secondary">Cancel</Button>
    </Button.Group>
  </>;
}