import React, { FunctionComponent } from 'react';
import tw, { styled } from 'twin.macro';

import MenuIcon from '../icons/MenuIcon';
import Overlay from '../layout/Overlay';

type ModalProps = {
  isOpen?: boolean;
  onClose?: () => void;
};

export const ModalHeader: FunctionComponent<React.HTMLProps<HTMLDivElement> &
  Omit<ModalProps, 'isOpen'>> = ({ children, onClose, ...restProps }) => (
  <div
    tw="backdrop-blur sticky px-5 py-5 inset-x-0 top-0 -mx-5 -mt-5 z-10"
    {...restProps}
  >
    <div tw="flex justify-between">
      {children}
      {onClose && (
        <button onClick={onClose}>
          <MenuIcon tw="h-4" isOpen />
        </button>
      )}
    </div>
  </div>
);

export const ModalBody = styled.div(tw`pt-5`);
export const ModalActions = styled.div(tw`pt-5`);

const Modal: FunctionComponent<React.HTMLProps<HTMLDivElement> &
  ModalProps> = ({ isOpen = false, onClose, children, ...props }) => {
  return (
    <>
      {isOpen && (
        <Overlay
          tw="flex items-center justify-center backdrop-blur-md"
          isOpen={isOpen}
        >
          <div onClick={onClose} tw="absolute inset-0 w-full h-full" />
          <div tw="relative max-w-screen-sm px-8 md:px-24 flex items-center justify-center">
            <div
              tw="pointer-events-auto rounded-sm shadow overflow-y-auto px-5 pb-5 max-h-[90vh]"
              {...props}
            >
              {children}
            </div>
          </div>
        </Overlay>
      )}
    </>
  );
};

export default Modal;