// FEATURE: Component EmailChipInput để nhập và hiển thị danh sách email dạng chip
import React, {useRef, useState} from 'react';
import {View, TextInput, TouchableOpacity, Image} from 'react-native';
import Chip from './chip';
import {BACKSPACE, DELIMITERS} from '../../config/constants';
import {isValidEmail} from '../../config/Functions';
import styles from './styles';
import {Text} from 'react-native';
import R from '../../assets/R';

/**
 * FUNCTIONALITY: Component cho phép nhập email và hiển thị dạng chip
  @param {Object} props 
 - Props của component
  @param {string[]} props.entries 
 - Danh sách email ban đầu
  @param {Function} props.onSubmit 
 - Callback khi submit danh sách email
  @param {string[]} props.delimiters 
 - Các ký tự phân tách để tự động thêm email
  @param {Object} props.containerStyle 
 - Style cho container chính
  @param {Object} props.chipContainerStyle 
 - Style cho từng chip
  @param {Object} props.chipTextStyle 
 - Style cho text trong chip
  @param {Object} props.inputContainerStyle 
 - Style cho container input
  @param {Object} props.inputStyle 
 - Style cho TextInput
  @param {React.Element} props.chipImage 
 - Icon hiển thị trong chip (thường là nút X)
  @param {string} props.keyboardAppearance 
 - Appearance của keyboard
  @param {string} props.clearButtonMode 
 - Mode của clear button
  @param {string} props.placeholder 
 - Placeholder text cho input
  @param {string} props.placeholderTextColor 
 - Màu placeholder
  @param {string} props.autoCapitalize 
 - Auto capitalize setting
  @param {boolean} props.autoCorrect 
 - Bật/tắt auto correct
  @param {boolean} props.autoFocus 
 - Auto focus khi mount
  @param {boolean} props.blurOnSubmit 
 - Blur input khi submit
  @param {string} props.keyboardType 
 - Loại keyboard
  @param {Object} props.TextInputProps 
 - Props bổ sung cho TextInput
  @param {string} props.widthContainerInput 
 - Chiều rộng của container input
 */

export const EmailChipInput = ({
  title,
  entries,
  onSubmit,
  chipImage,
  autoCorrect,
  TextInputProps,
  containerStyle,
  chipContainerStyle,
  inputContainerStyle,
  inputStyle,
  placeholderTextColor,
  chipTextStyle,
  delimiters = DELIMITERS,
  keyboardAppearance = 'default',
  clearButtonMode = 'while-editing',
  placeholder,
  autoCapitalize = 'none',
  autoFocus = false,
  blurOnSubmit = true,
  keyboardType = 'email-address',
  widthContainerInput= '100%',
}) => {
  // STATE: Refs và state management
  const ref = useRef(null);
  const [emails, setEmails] = useState(entries);
  const [value, setValue] = useState('');
  const [isExpanded, setIsExpanded] = useState(false); // Quản lý chế độ hiển thị chip

  // FUNCTIONALITY: Xử lý nhấn vào chip để edit
  const handleOnPressChip = index => {
    // NOTE: Đưa email từ chip về input để chỉnh sửa
    setValue(emails[index]);
    setEmails(emails.filter((_, i) => i !== index));

    // UI/UX: Focus vào input để tiếp tục chỉnh sửa
    return ref.current?.focus();
  };

  // PERFORMANCE: Tối ưu việc lấy entry cuối cùng
  const lastEntry = emails[emails.length - 1];

  // FUNCTIONALITY: Xử lý thay đổi text trong input
  const onTextChange = inputValue => {
    // BUG: Tránh duplicate khi edit email cuối cùng
    if (inputValue === lastEntry) {
      return setValue('');
    }

    // FEATURE: Tự động thêm email khi gặp delimiter
    if (
      isValidEmail(inputValue) &&
      delimiters.some(delimiter => inputValue.endsWith(delimiter))
    ) {
      setEmails([
        ...emails,
        inputValue.substring(0, inputValue.length - 1), // Loại bỏ delimiter
      ]);
      setValue('');
      return;
    }

    setValue(inputValue);
  };

  // FUNCTIONALITY: Xử lý phím backspace để xóa chip
  const onKeyPress = ({nativeEvent: {key}}) => {
    // FEATURE: Backspace khi input trống sẽ edit chip cuối cùng
    if (!value && key === BACKSPACE && lastEntry) {
      setValue(lastEntry);
      setEmails(emails.filter(email => email !== lastEntry));
    }
  };

  // FUNCTIONALITY: Xử lý blur/submit để finalize email
  const onBlur = () => {
    // VALIDATION: Nếu email không hợp lệ hoặc rỗng, chỉ submit danh sách hiện tại
    if (!isValidEmail(value)) {
      return onSubmit(emails);
    }

    // FEATURE: Thêm email hiện tại vào danh sách và submit
    const newEntries = [...emails, value];
    setEmails(newEntries);
    setValue('');
    onSubmit(newEntries);
  };

  // FUNCTIONALITY: Toggle chế độ hiển thị chip
  const toggleExpanded = () => {
    setIsExpanded(!isExpanded);
  };

  // FUNCTIONALITY: Render chip theo chế độ hiển thị
  const renderChips = () => {
    if (emails.length === 0) return null;
    
    // Nếu chỉ có 1 chip hoặc đang ở chế độ mở rộng, hiển thị tất cả
    if (emails.length === 1 || isExpanded) {
      return emails.map((email, index) => (
        <Chip
          index={index}
          value={email}
          onPress={handleOnPressChip}
          key={index}
          chipContainerStyle={chipContainerStyle}
          chipImage={chipImage}
          chipTextStyle={chipTextStyle}
          marginHorizontal={5}
        />
      ));
    }
    
    // Chế độ thu gọn: chỉ hiển thị chip đầu + text số lượng
    return (
      <>
        <Chip
          index={0}
          value={emails[0]}
          onPress={handleOnPressChip}
          key={0}
          chipContainerStyle={chipContainerStyle}
          chipImage={chipImage}
          chipTextStyle={chipTextStyle}
          marginHorizontal={5}
        />
        <Text style={{
          fontSize: 12,
          color: R.colors.gray,
          fontFamily: R.fonts.fontMedium,
          marginLeft: 5,
          alignSelf: 'center'
        }}>
          +{emails.length - 1} more
        </Text>
      </>
    );
  };

  return (
    <View style={containerStyle}>
      <View
        style={[
          {
            flexDirection: 'row',
            flexWrap: emails.length > 0 ? 'wrap' : 'nowrap',
            alignItems: 'center',
          }
        ]}>
        {/* FEATURE: Render danh sách email chips */}
        <Text
        style={{
          fontSize: 12,
          color: R.colors.black,
          fontFamily:R.fonts.fontMedium,
          fontWeight:'600',
        }}
        >{title}</Text>
        {renderChips()}
        
        {/* FEATURE: Nút toggle thu gọn/phóng to */}
        {emails.length > 1 && (
          <View style={{ position: 'absolute', right: 0, top: 5}}>
            <TouchableOpacity
              onPress={toggleExpanded}
            >
              <Image 
                source={isExpanded ? R.images.icDrop : R.images.icDrop} 
                style={{ 
                  width: 30,
                  height: 20,
                  tintColor: R.colors.black
                }}
              />
            </TouchableOpacity>
          </View>
        )}
        
        {/* FEATURE: Input để nhập email mới */}
        <View style={[{width: widthContainerInput}, inputContainerStyle]}>
          <TextInput
            value={value}
            ref={ref}
            onChangeText={onTextChange}
            onKeyPress={onKeyPress}
            onSubmitEditing={onBlur}
            onBlur={onBlur}
            blurOnSubmit={blurOnSubmit}
            keyboardType={keyboardType}
            clearButtonMode={clearButtonMode}
            autoCorrect={autoCorrect}
            autoFocus={autoFocus}
            placeholder={placeholder}
            autoCapitalize={autoCapitalize}
            keyboardAppearance={keyboardAppearance}
            placeholderTextColor={placeholderTextColor}
            style={[{
              fontSize: 12,
              color: R.colors.black,
              fontFamily:R.fonts.fontMedium,
              fontWeight:'600',
              borderBottomWidth:1, 
              borderColor:R.colors.grayBorderInputTextHeader
            }, inputStyle]}
            {...TextInputProps}
          />
        </View>
      </View>
    </View>
  );
};

// PERFORMANCE: Memoize component để tránh re-render
export default React.memo(EmailChipInput);
