import React, { useState, useEffect } from 'react';
import { View, Text, Textarea, Input, Picker } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './EditModal.scss';
import { useKeyboardHeight } from '@/store/keyboardStore'

interface EditModalProps {
  visible: boolean;
  title: string;
  type: string;
  placeholder: string;
  initialValue: string;
  maxLength: number;
  onSave: (value: string) => void;
  onCancel: () => void;
  validationMessage?: string;
}

const EditModal: React.FC<EditModalProps> = ({
  visible,
  title,
  type,
  placeholder,
  initialValue,
  maxLength,
  onSave,
  onCancel,
  validationMessage
}) => {
  const [value, setValue] = useState(initialValue);
  const [isValid, setIsValid] = useState(true);

  // 使用全局键盘状态
  const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
  // 使用全局键盘状态监听
  useEffect(() => {
    // 初始化全局键盘监听器
    initializeKeyboardListener()

    // 添加本地监听器
    const removeListener = addListener((height, visible) => {
      console.log('AiImportPopup 收到键盘变化:', height, visible)
    })

    return () => {
      removeListener()
    }
  }, [initializeKeyboardListener, addListener])
  useEffect(() => {
    if (visible) {
      setValue(initialValue);
    }
  }, [visible, initialValue]);

  const handle_input_change = (e: any) => {
    const new_value = e.detail.value;
    setValue(new_value);

    // 验证输入
    const valid = new_value.length >= 2 && new_value.length <= maxLength;
    setIsValid(valid);
  };

  const handle_save = () => {
    if (!isValid) {
      Taro.showToast({
        title: validationMessage || `请填写 2-${maxLength} 个字符`,
        icon: 'none',
        duration: 2000
      });
      return;
    }

    onSave(value);
  };

  const handle_cancel = () => {
    setValue(initialValue);
    onCancel();
  };

  if (!visible) {
    return null;
  }

  return (
    <View className="edit_modal_overlay">
      <View className="edit_modal_container" style={{ paddingBottom: isKeyboardVisible ? (type === 'nickname' ? `${keyboardHeight + 60}px` : `${keyboardHeight }px`) : undefined }}>
        {/* 标题栏 */}
        <View className="modal_header">
          <Text className="modal_title">{title}</Text>
          <View className="close_button" onClick={handle_cancel}>
            <View className="close_icon">
              <View className="close_line"></View>
              <View className="close_line"></View>
            </View>
          </View>
        </View>

        {/* 内容区域 */}
        <View className="modal_content">
          {/* 文本输入区域 */}
          <View className="input_container">

            {type === 'nickname' ? (
              <Input
                className="text_input nickname_input"
                value={value}
                type="nickname"
                placeholder={placeholder}
                maxlength={maxLength}
                onInput={handle_input_change}
                adjustPosition={false}
                confirmType="done"
                autoFocus={true}
              />
            ) : (
              <>
                <Textarea
                  className="text_input"
                  value={value}
                  placeholder={placeholder}
                  maxlength={maxLength}
                  onInput={handle_input_change}
                  autoFocus={true}
                  adjustPosition={false}
                />
                <View className="char_count">
                  <Text className="count_text">{value.length}/{maxLength}</Text>
                </View>
              </>
            )}
          </View>

          {/* 验证提示 */}
          {!isValid && (
            <View className="validation_message">
              <Text className="validation_text">
                {validationMessage || `请填写 2-${maxLength} 个字符`}
              </Text>
            </View>
          )}
        </View>

        {/* 底部按钮 */}
        <View className="modal_footer">
          <View className="save_button" onClick={handle_save}>
            <Text className="save_text">保存</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

export default EditModal;