import React, {
  ComponentType,
  useState
} from 'react';
import styled from 'styled-components';

import {
  H1,
  H2,
  InputSwitch
} from '@alicloud/demo-rc-elements';

import {
  IComponentTesterProps
} from '../../types';
import intl from '../../intl';

import Fixings from './fixings';

const ScTesting = styled.div`
  margin: 12px;
`;

export default function ComponentTester<C extends ComponentType<any>>({
  componentName,
  component,
  componentFusion,
  componentTesting,
  fixings
}: IComponentTesterProps<C>): JSX.Element {
  const [stateFusion, setStateFusion] = useState(false);
  const Testing = componentTesting;
  
  return <>
    <H1>{componentName}</H1>
    <InputSwitch {...{
      label: intl('op:use_fusion_component'),
      value: stateFusion,
      onChange: setStateFusion
    }} />
    <Fixings fixings={fixings} />
    <H2>{intl('title:test_cases')}</H2>
    <ScTesting>
      <Testing component={stateFusion ? componentFusion as C : component} />
    </ScTesting>
  </>;
}