/* eslint-disable react/jsx-props-no-spreading */
import React, { FunctionComponent } from 'react';
import omit from 'lodash/omit';
import { AiOutlineClose } from 'react-icons/ai';
import cn from 'classnames';
import { FluentModalProps } from './types.d';
import { IconButton } from '../Icon-Button';
import { Title } from '../Title';
import { StyledFluentModal } from './styled';
import { useTheme } from '../Theme';

export const FluentModal: FunctionComponent<FluentModalProps> = (props) => {
  const {
    children,
    background = 'light',
    className = '',
    closeButton,
    hideBackdrop,
    horizontalAlignment = 'center',
    onClose = () => {},
    title,
  } = props;

  const theme = useTheme();

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

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

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

  const omittedProps = omit(
    props,
    'background',
    'children',
    'closeButton',
    'handleClose',
    'hideBackdrop',
    'horizontalAlignment',
    'title'
  );

  return (
    <StyledFluentModal
      $theme={theme}
      $background={background}
      {...omittedProps}
      className={modalClasses}
      onDismiss={handleClose}
      overlay={{ hidden: hideBackdrop }}
    >
      {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}
    </StyledFluentModal>
  );
};
