import React from 'react';
import { View, FlatList, Text, TouchableOpacity, Image } from 'react-native';
import { CheckBox } from 'src/components/CheckBox';
import InfoIcon from 'assets/icons/info.svg';
import { API_HOST } from 'src/constants';
import { styles } from './styles';
import { SeriesData, SeriesGroup, SeriesItem } from '../types';

const TravelSeriesList = ({
  series,
  indexSeries,
  routes,
  handleCheckboxChange,
  setIsInfoModalVisible,
  setInfoItem,
  disabled,
  includeAll = true,
}: {
  series: SeriesData[];
  indexSeries: number;
  routes: SeriesGroup[];
  handleCheckboxChange: (item: SeriesItem, isDouble: boolean, seriesId: number) => void;
  setIsInfoModalVisible: (value: boolean) => void;
  setInfoItem: (item: SeriesItem) => void;
  disabled: boolean;
  includeAll?: boolean;
}) => {
  const renderTravelSeriesItem = (
    { item }: { item: SeriesItem },
    seriesId: number,
    icon?: string
  ) => (
    <View key={item.id} style={styles.itemContainer}>
      <TouchableOpacity
        style={styles.headerContainer}
        onPress={() => handleCheckboxChange(item, false, seriesId)}
        disabled={disabled}
      >
        {!disabled && (
          <CheckBox
            onChange={() => handleCheckboxChange(item, false, seriesId)}
            value={Boolean(item.visited)}
            color={'#0F3F4F'}
          />
        )}
        {item.double_point === 1 && !disabled && (
          <View style={{ marginLeft: 8 }}>
            <CheckBox
              onChange={() => handleCheckboxChange(item, true, seriesId)}
              value={Boolean(item.visited_double)}
              color={'#0F3F4F'}
            />
          </View>
        )}
        {icon && indexSeries === 0 && (
          <Image
            source={{ uri: API_HOST + icon }}
            style={[styles.itemIcon, disabled ? { marginLeft: 0 } : {}]}
          />
        )}
        <Text style={styles.contentText}>
          {item.name}
          {item.new === 1 && (
            <View>
              <Text style={styles.textNew}> NEW</Text>
            </View>
          )}
        </Text>
      </TouchableOpacity>
      {item.description && item.description?.length > 0 && (
        <TouchableOpacity
          style={styles.infoSeries}
          onPress={() => {
            setIsInfoModalVisible(true);
            setInfoItem(item);
          }}
        >
          <InfoIcon />
        </TouchableOpacity>
      )}
    </View>
  );

  return (
    <View style={[styles.travelSeriesList]}>
      {(indexSeries === 0 && includeAll)
        ? series.map((s) => {
            return (
              <View key={s?.series_id} style={{ minHeight: 40, gap: 8, marginBottom: 5 }}>
                <Text style={styles.travelSeriesText}>{s?.series_name}</Text>
                <FlatList
                  data={s?.items}
                  renderItem={(item) => renderTravelSeriesItem(item, s.series_id, s?.icon)}
                  keyExtractor={(item) => item?.id.toString()}
                  scrollEnabled={false}
                />
              </View>
            );
          })
        : series
            .find((s) => s.series_id === routes[indexSeries].series_id)
            ?.items?.map((item) => renderTravelSeriesItem({ item }, routes[indexSeries].series_id))}
    </View>
  );
};

export default TravelSeriesList;
