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

import {
  BreadcrumbComponent,
  BreadcrumbProps
} from '@alicloud/console-components';
import {
  RadioGroup,
  ChoiceItem
} from '@alicloud/demo-rc-elements';

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

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

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

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

// eslint-disable-next-line react/no-multi-comp
class ComponentClzNoChildren extends React.Component {
  render(): JSX.Element {
    return <div data-compoent-class-no-children />;
  }
}

enum EComponentChoice {
  NONE,
  STRING,
  COMPONENT_FN,
  COMPONENT_FN_NO_CHILDREN,
  COMPONENT_CLASS,
  COMPONENT_CLASS_NO_CHILDREN
}

const dataSource: ChoiceItem<EComponentChoice>[] = [{
  label: '无',
  value: EComponentChoice.NONE
}, {
  label: '字符串 "x"',
  value: EComponentChoice.STRING
}, {
  label: 'ComponentFn',
  value: EComponentChoice.COMPONENT_FN
}, {
  label: 'ComponentFnNoChildren',
  value: EComponentChoice.COMPONENT_FN_NO_CHILDREN
}, {
  label: 'ComponentClz ',
  value: EComponentChoice.COMPONENT_CLASS
}, {
  label: 'ComponentClzNoChildren',
  value: EComponentChoice.COMPONENT_CLASS_NO_CHILDREN
}];

export default function Testing({
  component
}: ITestingProps<BreadcrumbComponent>): JSX.Element {
  const Breadcrumb = component;
  
  const [stateComponentChoice, setStateComponentChoice] = useState<EComponentChoice>(EComponentChoice.NONE);
  const componentProp: BreadcrumbProps['component'] = useMemo((): BreadcrumbProps['component'] => {
    switch (stateComponentChoice) {
      case EComponentChoice.STRING:
        return 'x';
      case EComponentChoice.COMPONENT_FN:
        return ComponentFn;
      case EComponentChoice.COMPONENT_FN_NO_CHILDREN:
        return ComponentFnNoChildren;
      case EComponentChoice.COMPONENT_CLASS:
        return ComponentClz;
      case EComponentChoice.COMPONENT_CLASS_NO_CHILDREN:
        return ComponentClzNoChildren;
      default:
        return undefined;
    }
  }, [stateComponentChoice]);
  
  return <>
    <RadioGroup<EComponentChoice> {...{
      items: dataSource,
      value: stateComponentChoice,
      onChange: setStateComponentChoice
    }} />
    <Breadcrumb component={componentProp}>
      <Breadcrumb.Item link="#/home">Home</Breadcrumb.Item>
      <Breadcrumb.Item link="#/categories">All Categories</Breadcrumb.Item>
      <Breadcrumb.Item link="#/categories/women-clothes">Women’s Clothing</Breadcrumb.Item>
      <Breadcrumb.Item link="#/categories/women-clothes/blouse-shirt">Blouses & Shirts</Breadcrumb.Item>
      <Breadcrumb.Item link="#/categories/women-clothes/blouse-shirt/t-shirt">T-shirts <b>78,999</b> Results</Breadcrumb.Item>
    </Breadcrumb>
  </>;
}