import { CloseOutlined, MinusOutlined } from '@ant-design/icons';
import { Button, Modal } from 'antd';
import type { CSSProperties, ReactNode } from 'react';
import './FullscreenPreviewModal.css';

type FullscreenPreviewModalProps = {
  open: boolean;
  title?: ReactNode;
  meta?: ReactNode;
  actions?: ReactNode;
  hideHeader?: boolean;
  className?: string;
  contentClassName?: string;
  fillContent?: boolean;
  modalStyle?: CSSProperties;
  shellStyle?: CSSProperties;
  zIndex?: number;
  getContainer?: HTMLElement | (() => HTMLElement) | false;
  maskClosable?: boolean;
  minimizeLabel?: string;
  onMinimize?: (() => void) | null;
  onClose: () => void;
  children: ReactNode;
};

export function FullscreenPreviewModal({
  open,
  title,
  meta,
  actions,
  hideHeader = false,
  className,
  contentClassName,
  fillContent = false,
  modalStyle,
  shellStyle,
  zIndex = 1400,
  getContainer,
  maskClosable = true,
  minimizeLabel = '최소화',
  onMinimize,
  onClose,
  children,
}: FullscreenPreviewModalProps) {
  return (
    <Modal
      open={open}
      footer={null}
      title={null}
      width="100vw"
      style={modalStyle}
      zIndex={zIndex}
      getContainer={getContainer}
      maskClosable={maskClosable}
      onCancel={onClose}
      className={['fullscreen-preview-modal', className ?? ''].filter(Boolean).join(' ')}
    >
      <div className="fullscreen-preview-modal__shell" style={shellStyle}>
        {hideHeader ? null : (
          <div className="fullscreen-preview-modal__header">
            <div className="fullscreen-preview-modal__title-group">
              {title ? <div className="fullscreen-preview-modal__title">{title}</div> : null}
              {meta ? <div className="fullscreen-preview-modal__meta">{meta}</div> : null}
            </div>
            <div className="fullscreen-preview-modal__actions">
              {actions}
              {onMinimize ? (
                <Button
                  type="text"
                  className="fullscreen-preview-modal__icon-button fullscreen-preview-modal__minimize-button"
                  aria-label={minimizeLabel}
                  onClick={onMinimize}
                >
                  <MinusOutlined aria-hidden="true" />
                </Button>
              ) : null}
              <Button
                type="text"
                className="fullscreen-preview-modal__icon-button fullscreen-preview-modal__close-button"
                aria-label="닫기"
                icon={<CloseOutlined />}
                onClick={onClose}
              />
            </div>
          </div>
        )}
        <div
          className={[
            'fullscreen-preview-modal__content',
            fillContent ? 'fullscreen-preview-modal__content--fill' : '',
            contentClassName ?? '',
          ]
            .filter(Boolean)
            .join(' ')}
        >
          {children}
        </div>
      </div>
    </Modal>
  );
}