import React, { useState, useEffect, useRef } from 'react';
import { Modal, Input } from 'antd';
import type { TextAreaRef } from 'antd/es/input/TextArea';
import {
  CANVAS_MODAL_PROPS,
  CANVAS_MODAL_TITLE_STYLE,
} from './canvasModalProps';

export interface PromptModalProps {
  /** 控制弹窗开关 */
  open: boolean;
  /** 提示标签，如"图表标题" */
  label?: string;
  /** 输入框 placeholder */
  placeholder?: string;
  /** 输入框默认值 */
  defaultValue?: string;
  /** 确认回调，返回用户输入值（已 trim） */
  onConfirm: (value: string) => void;
  /** 取消 / 关闭回调 */
  onCancel: () => void;
}

/**
 * 轻量文本输入弹窗 —— 用于 Canvas 右键菜单中需要用户输入文本的场景。
 * 特点：多行输入、自动聚焦、Ctrl+Enter 确认、ESC 取消。
 */
const PromptModal: React.FC<PromptModalProps> = ({
  open,
  label = '请输入',
  placeholder,
  defaultValue = '',
  onConfirm,
  onCancel,
}) => {
  const [value, setValue] = useState(defaultValue);
  const textAreaRef = useRef<TextAreaRef>(null);

  // 每次打开时重置为 defaultValue 并聚焦
  useEffect(() => {
    if (open) {
      setValue(defaultValue);
      requestAnimationFrame(() => {
        textAreaRef.current?.focus();
      });
    }
  }, [open, defaultValue]);

  const handleOk = () => {
    onConfirm(value.trim());
  };

  return (
    <Modal
      {...CANVAS_MODAL_PROPS}
      open={open}
      onCancel={onCancel}
      onOk={handleOk}
      okText="确认"
      cancelText="取消"
      title={<span style={CANVAS_MODAL_TITLE_STYLE}>{label}</span>}
    >
      <Input.TextArea
        ref={textAreaRef}
        value={value}
        placeholder={placeholder}
        onChange={(e) => setValue(e.target.value)}
        onKeyDown={(e) => {
          if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
            e.preventDefault();
            handleOk();
          }
        }}
        style={{ borderRadius: 6 }}
        autoSize={{ minRows: 3, maxRows: 8 }}
        allowClear
      />
    </Modal>
  );
};

export default PromptModal;
