/* eslint-disable react/jsx-props-no-spreading */
import React, { FunctionComponent } from 'react';
import { AiOutlineClose } from 'react-icons/ai';
import cn from 'classnames';

import { IconButton } from '../Icon-Button';
import { ModalProps } from './types.d';
import { StyledModal } from './styled-component';
import { Title } from '../Title';
import { useTheme } from '../Theme';

export const Modal: FunctionComponent<ModalProps> = (props) => {
  const {
    title,
    children,
    hideBackdrop = false,
    horizontalAlignment = 'center',
    className = '',
    background = 'light',
    onClose = () => {},
    closeButton = false,
  } = props;
  const theme = useTheme();

  const modalClasses = cn({
    'square-modal': true,
    [`horizontal-align-${horizontalAlignment}`]: true,
    'hide-backdrop': hideBackdrop,
    [className]: true,
  });

  const titleClassNames = cn({
    'square-modal-title': true,
    [title?.align ?? 'center']: true,
  });

  const handleClose = () => {
    onClose();
  };

  return (
    <StyledModal $theme={theme} {...props} title={undefined} className={modalClasses} $background={background}>
      {closeButton && (
        <IconButton color="gray50" onClick={handleClose} style={{ position: 'absolute', top: 15, right: 15 }}>
          <AiOutlineClose size={16} />
        </IconButton>
      )}
      {title ? (
        <div className={titleClassNames}>
          <Title size={title.textSize} multiline={title.multiline} style={{ maxWidth: title.maxWidth }}>
            {title.text}
          </Title>
        </div>
      ) : null}
      {children}
    </StyledModal>
  );
};
