import React, { HTMLAttributes, useRef } from 'react';
import { BoxSpace, SilkeBox } from '../silke-box';
import { SilkeButton, SilkeButtonSet, SilkeButtonSetProps } from '../silke-button';
import { SilkeIcon } from '../silke-icon';
import { SilkePopover } from '../silke-popover';
import { SilkeTitle } from '../silke-text';
import styles from './silke-modal.scss';

export type SilkeModalProps = {
  title?: React.ReactNode;
  children?: React.ReactNode;
  hide?: boolean;
  pad?: BoxSpace;
  size?: 'small' | 'default' | 'large';
  rounded?: boolean | 'tiny' | 'small' | 'medium' | 'full';
  onBack?: () => void;
  onClose?: () => void;
  hideCloseButton?: boolean;
  contextId?: string;
  logo?: boolean;
  gap?: BoxSpace;
};

export function SilkeModal({
  title,
  children,
  pad,
  rounded,
  onBack,
  onClose,
  hideCloseButton,
  contextId = 'silke.modal',
  logo,
  gap = 'm',
  size = 'default',
  ...rest
}: SilkeModalProps) {
  const modalRef = useRef<HTMLDivElement>(null);

  let cl = styles.modal;
  if (size) cl += ' ' + styles[`-${size}`];

  return (
    <>
      {!rest.hide && (
        <SilkePopover>
          <div className={styles.overlay} onMouseDown={onClose} />
        </SilkePopover>
      )}
      <SilkePopover {...rest} contextId={contextId} onRequestClose={onClose}>
        <SilkeBox
          className={cl}
          column
          bg="neutral-5"
          gap={gap}
          pad={pad === undefined ? 'l' : pad}
          tabIndex={-1}
          ref={modalRef}
          aria-modal="true"
          role="dialog"
          aria-labelledby="modal-title"
          rounded={rounded || 'medium'}
          shadow="level4"
          scroll
          onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
          onClick={(e: React.MouseEvent) => e.stopPropagation()}
        >
          {(title || (onClose && !hideCloseButton) || onBack || logo) && (
            <SilkeBox className={styles.header} gap="m" vAlign="center" data-pad={pad === 'none'}>
              {onBack && (
                <SilkeBox pad="m" onClick={onBack}>
                  <SilkeIcon icon="left" />
                </SilkeBox>
              )}
              <SilkeBox column gap="xs" flex align={['start', 'center']} id="modal-title">
                {logo && (
                  <img
                    src="/static/logo.svg"
                    alt="Vev logo"
                    style={{ width: 50, marginLeft: '-10px' }}
                  />
                )}
                {title && <SilkeTitle kind="s">{title}</SilkeTitle>}
              </SilkeBox>
              {!hideCloseButton && onClose && (
                <SilkeButton
                  aria-label="Close modal"
                  icon="close"
                  kind="ghost"
                  size="base"
                  onClick={onClose}
                />
              )}
            </SilkeBox>
          )}
          {children}
        </SilkeBox>
      </SilkePopover>
    </>
  );
}

export function SilkeModalContent({
  className,
  children,
  ...rest
}: HTMLAttributes<HTMLDivElement>) {
  let cl = styles.content;
  if (className) cl += ' ' + className;
  return (
    <div {...rest} className={cl}>
      {children}
    </div>
  );
}

export function SilkeModalActions({ children, ...rest }: Omit<SilkeButtonSetProps, 'size'>) {
  return (
    <SilkeButtonSet {...rest} gap="s" hAlign="end" className={styles.buttons}>
      {children}
    </SilkeButtonSet>
  );
}