import React, { useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  LayoutAnimation,
  Platform,
  UIManager
} from 'react-native';
import { CheckBox } from 'src/components';

import ChevronIcon from '../../../../../assets/icons/chevron-left.svg';
import { API_HOST } from 'src/constants';
import InfoIcon from '../../../../../assets/icons/info.svg';

import { styles } from './styles';
import { Colors } from 'src/theme';

interface SeriesItem {
  series_id: number;
  item_id: number;
  icon: string | null;
  name: string;
  readonly: boolean;
  info: string;
  new: boolean;
  checked: boolean;
  checked_double: boolean;
  double: boolean;
}

interface SeriesGroup {
  name: string;
  icon: string;
  series_id: number;
  series_name: string;
  items: SeriesItem[];
}

if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

export const AccordionListItem = React.memo(
  ({
    item,
    onCheckboxChange,
    setIsInfoModalVisible,
    setInfoItem,
    isSeries,
    token
  }: {
    item: SeriesGroup;
    onCheckboxChange: (subItem: SeriesItem, groupName: string, double?: boolean) => void;
    setIsInfoModalVisible: (isVisible: boolean) => void;
    setInfoItem: (item: SeriesItem) => void;
    isSeries: boolean;
    token: string;
  }) => {
    const [isExpanded, setIsExpanded] = useState(false);

    const toggleExpand = () => {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
      setIsExpanded(!isExpanded);
    };

    return (
      <View style={styles.sectionContainer}>
        <TouchableOpacity onPress={toggleExpand} style={styles.header}>
          <View style={styles.headerContainer}>
            {item.icon && (
              <Image
                source={{ uri: API_HOST + item.icon }}
                style={[
                  styles.headerImage,
                  isSeries ? { borderRadius: 0, borderWidth: 0 } : { resizeMode: 'cover' }
                ]}
              />
            )}
            <Text style={styles.headerText}>{item.name}</Text>
          </View>

          <View style={styles.chevronContainer}>
            <ChevronIcon
              fill={Colors.DARK_BLUE}
              style={[styles.headerIcon, isExpanded ? styles.rotate : null]}
            />
          </View>
        </TouchableOpacity>

        {isExpanded && (
          <View style={[styles.content, { backgroundColor: Colors.FILL_LIGHT }]}>
            {item.items.map((subItem, index) => (
              <View key={index} style={styles.itemContainer}>
                <TouchableOpacity
                  style={styles.headerContainer}
                  onPress={() => !subItem.readonly && token && onCheckboxChange(subItem, item.name)}
                  activeOpacity={subItem.readonly ? 1 : 0.2}
                >
                  {token && (
                    <CheckBox
                      onChange={() => !subItem.readonly && onCheckboxChange(subItem, item.name)}
                      value={subItem.checked}
                      color={'#0F3F4F'}
                      disabled={subItem.readonly}
                    />
                  )}
                  {subItem.double && token && (
                    <View style={{ marginLeft: 8 }}>
                      <CheckBox
                        onChange={() => onCheckboxChange(subItem, item.name, true)}
                        value={subItem.checked_double}
                        color={'#0F3F4F'}
                      />
                    </View>
                  )}
                  {subItem.icon && (
                    <Image
                      source={{ uri: API_HOST + subItem.icon }}
                      style={[styles.itemIcon, !token ? { marginLeft: 0 } : {}]}
                    />
                  )}
                  <Text style={styles.contentText}>
                    {subItem.name}
                    {subItem.new && (
                      <View>
                        <Text style={styles.textNew}> NEW</Text>
                      </View>
                    )}
                  </Text>
                </TouchableOpacity>
                {subItem.info && (
                  <TouchableOpacity
                    style={styles.info}
                    onPress={() => {
                      setIsInfoModalVisible(true);
                      setInfoItem(subItem);
                    }}
                  >
                    <InfoIcon />
                  </TouchableOpacity>
                )}
              </View>
            ))}
          </View>
        )}
      </View>
    );
  }
);
