import React, {
  useState
} from 'react';

import {
  InputSwitch
} from '@alicloud/demo-rc-elements';
import {
  AnimateComponent
} from '@alicloud/console-components';

import {
  ITestingProps
} from '../../types';
import DivZoomInOut from '../div-zoom-in-out';
import {
  ANIMATION_ENTER,
  ANIMATION_LEAVE
} from '../const';

function createCallback(title: string): (el: HTMLElement) => void {
  // eslint-disable-next-line no-console
  return (el: HTMLElement) => console.info(title, el);
}

const callbackBeforeAppear = createCallback('beforeAppear');
const callbackOnAppear = createCallback('onAppear');
const callbackAfterAppear = createCallback('afterAppear');
const callbackBeforeEnter = createCallback('beforeEnter');
const callbackOnEnter = createCallback('onEnter');
const callbackAfterEnter = createCallback('afterEnter');
const callbackBeforeLeave = createCallback('beforeLeave');
const callbackOnLeave = createCallback('onLeave');
const callbackAfterLeave = createCallback('afterLeave');

export default function Testing({
  component
}: ITestingProps<AnimateComponent>): JSX.Element {
  const Animate = component;
  
  const [stateVisible, setStateVisible] = useState(true);
  
  return <>
    <InputSwitch {...{
      label: 'Toggle Visible',
      value: stateVisible,
      onChange: setStateVisible
    }} />
    <Animate {...{
      animation: {
        enter: ANIMATION_ENTER,
        leave: ANIMATION_LEAVE
      },
      beforeAppear: callbackBeforeAppear,
      onAppear: callbackOnAppear,
      afterAppear: callbackAfterAppear,
      beforeEnter: callbackBeforeEnter,
      onEnter: callbackOnEnter,
      afterEnter: callbackAfterEnter,
      beforeLeave: callbackBeforeLeave,
      onLeave: callbackOnLeave,
      afterLeave: callbackAfterLeave
    }}>
      {stateVisible ? <DivZoomInOut /> : null}
    </Animate>
  </>;
}