import React, { useMemo, useState } from 'react';
import ReactDOM from 'react-dom';
import { useDidUpdateEffect, useEventListener } from '@devesharp/react-hooks';
import { CloseBtn } from '../CloseBtn';
import { Modal } from '../Modal';
import { IModalPageProps } from './ModalPage.interface';
import * as S from './ModalPage.style';

/**
 * Todo: verifcar se modal continua funcionando no stories
 * @param props
 * @constructor
 */
export const ModalPage: React.FunctionComponent<IModalPageProps> & {
   Body: React.FunctionComponent<any>;
   Actions: React.FunctionComponent<any>;
} = function ModalPage(props) {
   const {
      children,
      show,
      title,
      pageView = false,
      onRequestClose,
      animation = 'fade',
      width = 500,
      height = 0,
      transparent = false,
      ...rest
   } = props;

   const ContainerProps = useMemo(
      () =>
         pageView
            ? {}
            : {
                 show,
                 onRequestClose,
              },
      [pageView, onRequestClose, show],
   );

   const Container: any = useMemo(() => (pageView ? 'div' : Modal), [pageView]);

   return (
      <Container {...ContainerProps}>
         <S.Container width={width} height={height} className="modal-page-container" pageView={pageView}>
            {!!title && (
               <div className="title-container">
                  <div className="title-name">{title}</div>
                  {!pageView && (
                     <div className="float-right">
                        <CloseBtn onClick={onRequestClose} size={16} />
                     </div>
                  )}
               </div>
            )}

            {children}
         </S.Container>
      </Container>
   );
} as any;

ModalPage.Body = function ModalPageBody(props) {
   const { children, ...rest } = props;

   return <div className="body-container">{children}</div>;
} as any;

ModalPage.Actions = function ModalPageBody(props) {
   const { children, ...rest } = props;

   return <div className="actions-container">{children}</div>;
} as any;
