import React from 'react'

import type {IModalProps} from '../../../global/type.tsx'

import ModalHeader from './ModalHeader'

const Modal: React.FC<IModalProps> = ({
  showModal,
  onSubmit,
  onClose,
  titleHeader,
  children,
  size = '4xl',
}) => {
  const getSizeClass = (size: string) => {
    switch (size) {
      case 'sm':
        return '!max-w-sm'
      case 'md':
        return '!max-w-md'
      case 'lg':
        return '!max-w-lg'
      case 'xl':
        return '!max-w-xl'
      case '2xl':
        return '!max-w-2xl'
      case '3xl':
        return '!max-w-3xl'
      case '4xl':
        return '!max-w-4xl'
      case '5xl':
        return '!max-w-5xl'
      case '6xl':
        return '!max-w-6xl'
      case '7xl':
        return '!max-w-7xl'
      default:
        return '!max-w-4xl'
    }
  }
  if (!showModal) return null

  return (
    <>
      {onSubmit ? (
        <form onSubmit={onSubmit}>
          <div className="modal modal-open">
            <div className={`modal-box ${getSizeClass(size)} w-11/12`}>
              <ModalHeader
                titleHeader={titleHeader}
                onClose={onClose}
                onSubmit={onSubmit}
                showModal={showModal}
              />
              {children}
            </div>
          </div>
        </form>
      ) : (
        <div className="modal modal-open">
          <div className={`modal-box ${getSizeClass(size)} w-11/12`}>
            <ModalHeader
              titleHeader={titleHeader}
              onClose={onClose}
              onSubmit={onSubmit}
              showModal={showModal}
            />
            {children}
          </div>
        </div>
      )}
    </>
  )
}

export default Modal
