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

import {
  OverlayComponent
} from '@alicloud/console-components';

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

const ScOverlayContent = styled.div`
  padding: 20px;
  border: 1px solid #c36;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
  background-color: #fff;
`;

export default function Testing({
  component
}: ITestingProps<OverlayComponent>): JSX.Element {
  const Overlay = component;
  
  const [stateDomButton, setStateDomButton] = useState<HTMLButtonElement | null>(null);
  const [stateVisible, setStateVisible] = useState(false);
  const handleShow = useCallback(() => setStateVisible(true), [setStateVisible]);
  const handleHide = useCallback(() => setStateVisible(false), [setStateVisible]);
  
  return <>
    <button onClick={handleShow} ref={setStateDomButton}>Show</button>
    <Overlay {...{
      visible: stateVisible,
      target: () => stateDomButton,
      safeNode: () => stateDomButton,
      onRequestClose: handleHide
    }}>
      <ScOverlayContent>Hello World from Overlay!</ScOverlayContent>
    </Overlay>
  </>;
}