import type React from 'react';
import { useMemo, useRef } from 'react';
import { Dialog as BaseDialog } from '@base-ui/react/dialog';
import { i18next } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { X as IconX } from 'lucide-react';
import { Button } from '../Button';
import classes from './Dialog.module.scss';
import type { DialogProps } from './types';

type OpenChangeDetails = {
  reason?: 'outside-press' | 'escape-key' | 'close-press' | 'focus-out' | 'imperative-action' | 'none' | 'trigger-press';
  cancel?: () => void;
};

function Dialog(props: DialogProps) {
  const {
    open = false,
    onOpenChange,
    onConfirm,
    onCancel,
    onClose,
    title,
    description,
    content,
    footer,
    children,
    confirmText,
    cancelText,
    confirmLoading = false,
    confirmDisabled = false,
    cancelDisabled = false,
    showClose = true,
    maskClosable = true,
    escClosable = true,
    appendTo,
    width = 420,
    className,
    style,
    viewportClassName,
    viewportStyle,
    initialFocus,
    finalFocus = false,
  } = props;

  const { t } = i18next;
  const closingByActionRef = useRef<'cancel' | 'close' | null>(null);

  const mergedConfirmText = confirmText ?? t('Dialog.confirm');
  const mergedCancelText = cancelText ?? t('Dialog.cancel');
  const closeAriaLabel = t('Dialog.close');
  const bodyContent = children ?? content ?? description;
  const shouldWrapDescription = children === undefined && (
    typeof bodyContent === 'string' || typeof bodyContent === 'number'
  );
  const shouldRenderHeader = !!title || showClose;
  const shouldRenderFooter = (footer !== undefined || !!mergedCancelText || !!mergedConfirmText) && footer !== null;
  const popupStyle = useMemo<React.CSSProperties>(() => ({
    width: typeof width === 'number' ? `${width}px` : width,
    ...style,
  }), [style, width]);

  const requestClose = (type: 'cancel' | 'close') => {
    closingByActionRef.current = type;

    if (type === 'cancel') {
      onCancel?.();
    } else {
      onClose?.();
    }

    onOpenChange?.(false);
  };

  const renderDefaultFooter = () => (
    <>
      {mergedCancelText
        ? (
          <Button
            size="medium"
            className={cs(
              classes['chat-dialog__footer-button'],
              classes['chat-dialog__footer-button--secondary'],
            )}
            disabled={cancelDisabled}
            onClick={() => requestClose('cancel')}
          >
            {mergedCancelText}
          </Button>
        )
        : null}
      {mergedConfirmText
        ? (
          <Button
            size="medium"
            className={cs(
              classes['chat-dialog__footer-button'],
              classes['chat-dialog__footer-button--primary'],
            )}
            disabled={confirmDisabled || confirmLoading}
            onClick={onConfirm}
          >
            {confirmLoading ? `${mergedConfirmText}...` : mergedConfirmText}
          </Button>
        )
        : null}
    </>
  );
  const footerContent = footer ?? renderDefaultFooter();

  const handleOpenChange = (nextOpen: boolean, details?: OpenChangeDetails) => {
    if (!nextOpen) {
      if (details?.reason === 'outside-press' && !maskClosable) {
        details.cancel?.();
        return;
      }

      if (details?.reason === 'escape-key' && !escClosable) {
        details.cancel?.();
        return;
      }

      if (closingByActionRef.current) {
        closingByActionRef.current = null;
        onOpenChange?.(false);
        return;
      }

      onClose?.();
    }

    onOpenChange?.(nextOpen);
  };

  return (
    <BaseDialog.Root open={open} onOpenChange={handleOpenChange}>
      <BaseDialog.Portal container={appendTo ?? undefined}>
        <BaseDialog.Backdrop className={classes['chat-dialog__backdrop']} />
        <BaseDialog.Viewport
          className={cs(classes['chat-dialog__viewport'], viewportClassName)}
          style={viewportStyle}
        >
          <BaseDialog.Popup
            className={cs(classes['chat-dialog__popup'], className)}
            style={popupStyle}
            initialFocus={initialFocus}
            finalFocus={finalFocus}
          >
            {shouldRenderHeader && (
              <div className={classes['chat-dialog__header']}>
                <div className={classes['chat-dialog__header-main']}>
                  {title && (
                    <BaseDialog.Title className={classes['chat-dialog__title']}>
                      {title}
                    </BaseDialog.Title>
                  )}
                </div>
                {showClose && (
                  <button
                    type="button"
                    className={classes['chat-dialog__close']}
                    aria-label={closeAriaLabel}
                    onClick={() => requestClose('close')}
                  >
                    <IconX
                      aria-hidden="true"
                      size={20}
                      strokeWidth={1.5}
                    />
                  </button>
                )}
              </div>
            )}

            {bodyContent && (
              <div className={classes['chat-dialog__body']}>
                {shouldWrapDescription
                  ? (
                    <BaseDialog.Description className={classes['chat-dialog__description']}>
                      {bodyContent}
                    </BaseDialog.Description>
                  )
                  : bodyContent}
              </div>
            )}

            {shouldRenderFooter && (
              <div className={classes['chat-dialog__footer']}>
                {footerContent}
              </div>
            )}
          </BaseDialog.Popup>
        </BaseDialog.Viewport>
      </BaseDialog.Portal>
    </BaseDialog.Root>
  );
}

export { Dialog };