import React from 'react';
import { Modal as MuiModal, Paper, Box, Typography } from '@mui/material';
import { ModalBaseProps } from '../interfaces';
import styled from 'styled-components';
import { IconButton } from './IconButton';
import { Button } from './Button';

const ModalStyled = styled(MuiModal)({});

const ModalContentStyled = styled(Paper) <{ $w?: string }>`
  border: 1px solid #00000033;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: ${props => props.$w || '421px'};
  transform: translate(-50%, -50%);
  background-color: #fff;
  outline: none;
`;

const ModalHeaderStyled = styled(Box)`
  text-align: left;
  box-sizing: border-box;
  margin: 0;
  position: relative;
  padding: 22px 26px 15px 26px;
  pointer-events: none;
  & h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    color: #1d1d1d;
  }
  & p{
    margin-top: 16px;
  }
`;

const ModalFooterStyled = styled(Box) <{ $spaceBetween?: boolean }>`
  box-sizing: border-box;
  position: relative;
  padding: 24px;
  display: flex;
  justify-content: ${props => (props.$spaceBetween ? 'space-between' : 'flex-end')};
  gap: 24px;
`;

const ModalContainerChildrenStyled = styled(Box)`
  box-sizing: border-box;
  padding: 24px;
`;

export function Close() {
  return (
    <svg
      fill="#808080"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      height="24"
      width="24"
    >
      <path
        clipRule="evenodd"
        fillRule="evenodd"
        d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
      />
    </svg>
  );
}

export const Modal = ({ open, children, paperProps, ...props }: ModalBaseProps) => {

  const handleClose = (event: {}, reason: "backdropClick" | "escapeKeyDown") => {
    (reason === "escapeKeyDown" || !props.shouldNotCloseOnOutsideClick) && props.onClose?.(event as React.SyntheticEvent); 
  };


  return (
    <ModalStyled open {...props} onClose={handleClose}>
      <ModalContentStyled {...paperProps} $w={props.width}>
        <IconButton
          onClick={props.onClose}
          size="small"
          color="inherit"
          variant="text"
          cursor="pointer"
          sx={{ padding: '0', position: 'absolute', right: '22px', top: '22px', zIndex: 2}}
          className='Modal__Close'
        >
          <Close />
        </IconButton>
        {props.title && (
          <ModalHeaderStyled>
            <Typography variant="h2">{props.title}</Typography>
            {props.description && <Typography variant="body1">{props.description}</Typography>}
          </ModalHeaderStyled>
        )}

        <ModalContainerChildrenStyled>{children}</ModalContainerChildrenStyled>
        {!!props.action?.length && (
          <ModalFooterStyled $spaceBetween={props.actionSpaceBetween}>
            {props.action.map(({ color, variant, action, size, label, ...rest }, key) => (
              <Button color={color} variant={variant} key={key} onClick={action} size={size} {...rest}>
                {label}
              </Button>
            ))}
          </ModalFooterStyled>
        )}
      </ModalContentStyled>
    </ModalStyled>
  );
};