nomadmania-app/src/screens/InAppScreens/TravelsScreen/RegionsScreen/index.tsx

import React, { useCallback, useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, FlatList, Platform } from 'react-native';
import * as Progress from 'react-native-progress';
import { useFocusEffect, useNavigation } from '@react-navigation/native';
import moment from 'moment';

import { EditNmModal, Header, PageWrapper } from 'src/components';
import { CustomButton } from '../Components';
import { NmRegionItem } from '../Components/MyRegionsItems/NmRegionItem';
import { RegionItem } from '../Components/MyRegionsItems/RegionItem';
import MegaregionsModal from '../Components/MegaregionsModal';

import { StoreType, storage } from 'src/storage';
import { NmRegion, TCCRegion } from '../utils/types';
import { Colors } from 'src/theme';
import { styles } from './styles';
import {
  useGetMegaregionsQuery,
  useGetRegionQeQuery,
  usePostSetTCCRegionMutation
} from '@api/myRegions';
import { qualityOptions } from '../utils/constants';

import ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';
import { NAVIGATION_PAGES } from 'src/types';
import { useRegion } from 'src/contexts/RegionContext';

const RegionsScreen = () => {
  const token = storage.get('token', StoreType.STRING) as string;
  const { data: megaregions } = useGetMegaregionsQuery(String(token), true);
  const [megaSelectorVisible, setMegaSelectorVisible] = useState(false);
  const [selectedMega, setSelectedMega] = useState<{ name: string; id: number }>({
    id: 1,
    name: 'SOUTHERN EUROPE'
  });
  const { data: regionsQe } = useGetRegionQeQuery(selectedMega.id, String(token), true);
  const [total, setTotal] = useState(0);
  const [isEditModalVisible, setIsEditModalVisible] = useState(false);
  const [contentIndex, setContentIndex] = useState(0);
  const [filteredNmRegions, setFilteredNmRegions] = useState<NmRegion[] | null>(null);
  const [tccRegions, setTccRegions] = useState<TCCRegion[] | null>(null);
  const [filteredTccRegions, setFilteredTccRegions] = useState<TCCRegion[] | null>(null);
  const { mutate: updateTCC } = usePostSetTCCRegionMutation();
  const [modalState, setModalState] = useState({
    selectedFirstYear: 2021,
    selectedLastYear: 2021,
    selectedQuality: qualityOptions[2],
    selectedNoOfVisits: 1,
    years: [],
    id: null
  });
  const navigation = useNavigation();
  const { handleUpdateNMList: handleUpdateNM, nmRegions, setNmRegions, setUserData } = useRegion();

  useFocusEffect(
    useCallback(() => {
      navigation.getParent()?.setOptions({
        tabBarStyle: {
          display: 'flex',
          ...Platform.select({
            android: {
              height: 58
            }
          })
        }
      });
    }, [navigation])
  );

  useEffect(() => {
    const currentYear = moment().year();
    let yearSelector: { label: string; value: number }[] = [{ label: 'visited', value: 1 }];
    for (let i = currentYear; i >= 1951; i--) {
      yearSelector.push({ label: i.toString(), value: i });
    }
    handleModalStateChange({ years: yearSelector });
  }, []);

  const handleModalStateChange = (updates: { [key: string]: any }) => {
    setModalState((prevState) => ({ ...prevState, ...updates }));
  };

  const handleOpenEditModal = (item: NmRegion) => {
    handleModalStateChange({
      selectedFirstYear: item.year,
      selectedLastYear: item.last,
      selectedQuality:
        qualityOptions.find((quality) => quality.id === item.quality) || qualityOptions[2],
      selectedNoOfVisits: item.visits || 1,
      id: item.id
    });
    setIsEditModalVisible(true);
  };

  const handleUpdateTCC = useCallback(
    (region: number, visits: 0 | 1) => {
      const updatedTCC = tccRegions?.map((item) => {
        if (item.id === region) {
          return {
            ...item,
            visited: visits
          };
        }

        return item;
      });

      const updatedTCCData = {
        token,
        region,
        visits
      };

      updateTCC(updatedTCCData);
      updatedTCC && setTccRegions(updatedTCC);
    },
    [tccRegions]
  );

  useEffect(() => {
    if (nmRegions && nmRegions.length && token) {
      calcTotalCountries();
    }
  }, [nmRegions]);

  useEffect(() => {
    if (regionsQe && regionsQe.result === 'OK') {
      setNmRegions(regionsQe.data.out_regs);
      setTccRegions(regionsQe.data.out_tcc);
    }
  }, [regionsQe]);

  useEffect(() => {
    if (megaregions && megaregions.result === 'OK') {
      setContentIndex(0);
    }
  }, [selectedMega]);

  useEffect(() => {
    switch (contentIndex) {
      case 0:
        setFilteredNmRegions(nmRegions);
        setFilteredTccRegions(tccRegions);
        break;
      case 1:
        setFilteredNmRegions(nmRegions?.filter((item: NmRegion) => item.visits <= 0) || []);
        setFilteredTccRegions(tccRegions?.filter((item) => item.visited <= 0) || []);
        break;
      case 2:
        setFilteredNmRegions(nmRegions?.filter((item: NmRegion) => item.visits > 0) || []);
        setFilteredTccRegions(tccRegions?.filter((item) => item.visited > 0) || []);
        break;
    }
  }, [contentIndex, nmRegions, tccRegions]);

  useEffect(() => {
    if (megaregions && megaregions.result === 'OK') {
      setSelectedMega(megaregions.data[1]);
    }
  }, [megaregions])

  const calcTotalCountries = () => {
    const visited = nmRegions?.filter((item: NmRegion) => item.visits > 0).length || 0;
    setTotal(visited);
  };

  const renderItem = ({ item }: { item: NmRegion }) => (
    <TouchableOpacity onPress={() => {
      setUserData({
        type: 'nm',
        region_flag: item.flag_1,
        region_name: item.region_name,
        best_visit_quality: item.quality,
        first_visit_year: item.year,
        last_visit_year: item.last,
        no_of_visits: item.visits,
        visited: item.visits > 0,
      });
      navigation.navigate(
      ...([
        NAVIGATION_PAGES.REGION_PREVIEW,
        {
          regionId: item.id,
          isTravelsScreen: true,
          type: 'nm',
          disabled: token ? false : true,
        }
      ] as never)
    )}}>
      <NmRegionItem
        item={item}
        openEditModal={handleOpenEditModal}
        updateNM={handleUpdateNM}
        token={token}
      />
    </TouchableOpacity>
  );

  return (
    <PageWrapper>
      <Header
        label="Regions"
        // rightElement={
        //   <TouchableOpacity
        //     onPress={() => navigation.navigate(NAVIGATION_PAGES.REGIONS_INFO as never)}
        //     style={{ width: 30 }}
        //   >
        //     <InfoIcon />
        //   </TouchableOpacity>
        // }
      />
      <TouchableOpacity style={styles.megaSelector} onPress={() => setMegaSelectorVisible(true)}>
        <Text style={styles.megaButtonText}>{selectedMega?.name}</Text>
        <ChevronIcon width={18} height={18} />
      </TouchableOpacity>

      {token && (
        <View style={styles.buttonContainer}>
          <CustomButton
            title="All"
            onPress={() => setContentIndex(0)}
            isActive={contentIndex === 0}
          />
          <CustomButton
            title="Not visited"
            onPress={() => setContentIndex(1)}
            isActive={contentIndex === 1}
          />
          <CustomButton
            title="Visited"
            onPress={() => setContentIndex(2)}
            isActive={contentIndex === 2}
          />
        </View>
      )}

      <View style={styles.progressHeader}>
        <Text style={styles.textSmall}>Visited regions</Text>
        <Text style={styles.textSmall}>
          {nmRegions?.length
            ? `${total}/${nmRegions.length} • ${((total * 100) / nmRegions.length).toFixed(2)}%`
            : '0/0 • 100%'}
        </Text>
      </View>

      <Progress.Bar
        progress={nmRegions?.length ? total / nmRegions.length : 1}
        width={null}
        height={4}
        color={Colors.DARK_BLUE}
        borderWidth={0}
        borderRadius={5}
        unfilledColor={Colors.FILL_LIGHT}
      />

      {filteredNmRegions && (filteredNmRegions?.length || filteredTccRegions?.length) ? (
        <FlatList
          data={filteredNmRegions}
          renderItem={renderItem}
          keyExtractor={(item) => item.id.toString()}
          showsVerticalScrollIndicator={false}
          style={{ paddingVertical: 8 }}
          ListFooterComponent={
            filteredTccRegions && filteredTccRegions.length ? (
              <View style={{ marginVertical: 8 }}>
                <Text style={[styles.textMedium, { textAlign: 'center' }]}>TCC regions</Text>
                {filteredTccRegions?.map((item) => (
                  <RegionItem
                    item={item}
                    updateRegion={handleUpdateTCC}
                    key={item.id}
                    token={token}
                  />
                ))}
              </View>
            ) : null
          }
        />
      ) : null}

      <MegaregionsModal
        isVisible={megaSelectorVisible}
        onClose={() => setMegaSelectorVisible(false)}
        onSelect={(object) => {
          setMegaSelectorVisible(false);
          setSelectedMega(object);
        }}
        data={megaregions?.data ?? []}
      />

      <EditNmModal
        isVisible={isEditModalVisible}
        onClose={() => setIsEditModalVisible(false)}
        modalState={modalState}
        updateModalState={handleModalStateChange}
        updateNM={handleUpdateNM}
      />
    </PageWrapper>
  );
};

export default RegionsScreen;