import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  LayoutAnimation,
  Platform,
  UIManager
} from 'react-native';

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

import { Colors } from 'src/theme';
import { styles } from './styles';
import { ItemStyles } from '../../TravellersScreen/Components/styles';
import { NAVIGATION_PAGES } from 'src/types';

interface CountryItem {
  id: number;
  altId?: number | null;
  name: string;
  daysSpent: number;
  flag: string | null;
  regions: {
    id: number;
    region: string;
    days_spent: number;
  }[];
  navigation: any;
  expandedIds: number[];
  setExpandedIds: (ids: number[]) => void;
}

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

const getRegionSubname = (region?: string): string => {
  if (!region) return '';

  const [, ...rest] = region.split(/ – | - /);

  return rest.join(' - ');
};

export const AccordionListItem = React.memo(
  ({
    id,
    altId,
    name,
    daysSpent,
    flag,
    regions,
    navigation,
    expandedIds,
    setExpandedIds
  }: CountryItem) => {
    const isExpanded = expandedIds.includes(id);

    const toggleExpand = () => {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

      if (isExpanded) {
        setExpandedIds(expandedIds.filter((expId) => expId !== id));
      } else {
        setExpandedIds([...expandedIds, id]);
      }
    };

    return (
      <View style={styles.sectionContainer}>
        <TouchableOpacity
          onPress={toggleExpand}
          style={[ItemStyles.wrapper, { paddingHorizontal: 8 }]}
        >
          <TouchableOpacity
            onPress={() =>
              altId
                ? navigation.navigate(NAVIGATION_PAGES.REGION_PREVIEW, {
                    regionId: altId,
                    isTravelsScreen: true,
                    type: 'nm',
                    disabled: false
                  })
                : navigation.navigate(NAVIGATION_PAGES.COUNTRY_PREVIEW, {
                    regionId: id,
                    isTravelsScreen: true,
                    type: 'country',
                    disabled: false
                  })
            }
          >
            <Image style={ItemStyles.bigFlag} source={{ uri: API_HOST + flag }} />
          </TouchableOpacity>

          <View style={[ItemStyles.contentWrapper, { gap: 4 }]}>
            <View style={{ flex: 1 }}>
              <Text style={[{ color: Colors.DARK_BLUE, fontWeight: '600', fontSize: 15 }]}>
                {name}
              </Text>
              {regions?.length ? (
                <Text style={[{ color: Colors.TEXT_GRAY, fontSize: 13 }]}>
                  {regions.length} regions visited
                </Text>
              ) : null}
            </View>

            <Text
              style={[
                ItemStyles.nameAndCnt,
                { fontFamily: 'montserrat-700', fontSize: 15, paddingHorizontal: 4 }
              ]}
            >
              {daysSpent}
            </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 }]}>
            <View style={{ height: 1, backgroundColor: '#E5E5E5', marginBottom: 6 }} />
            {regions.map((r, index) => (
              <TouchableOpacity
                key={index}
                style={[ItemStyles.wrapper, { paddingLeft: 20, paddingRight: 0 }]}
                onPress={() =>
                  navigation.navigate(NAVIGATION_PAGES.REGION_PREVIEW, {
                    regionId: r.id,
                    isTravelsScreen: true,
                    type: 'nm',
                    disabled: false
                  })
                }
              >
                <View style={[ItemStyles.contentWrapper, { gap: 4 }]}>
                  <View style={{ flex: 1 }}>
                    <Text style={[{ color: Colors.DARK_BLUE, fontWeight: '600', fontSize: 13 }]}>
                      {getRegionSubname(r.region)}
                    </Text>
                  </View>

                  <Text
                    style={[
                      ItemStyles.nameAndCnt,
                      { fontFamily: 'montserrat-700', fontSize: 15, paddingHorizontal: 4 }
                    ]}
                  >
                    {r.days_spent}
                  </Text>
                </View>
              </TouchableOpacity>
            ))}
          </View>
        )}
      </View>
    );
  }
);
