nomadmania-app/src/screens/InAppScreens/MapScreen/RegionViewScreen/index.tsx

import React, { FC, useCallback, useEffect, useState } from 'react';
import { View, Text, Image, TouchableOpacity, Platform } from 'react-native';
import { styles } from './styles';
import {
  Button,
  CustomImageViewer,
  EditNmModal,
  HorizontalTabView,
  Loading,
  Modal as ReactModal
} from 'src/components';
import { CommonActions, useFocusEffect } from '@react-navigation/native';
import { Colors } from 'src/theme';
import { styles as ButtonStyles } from 'src/components/RegionPopup/style';
import * as ImagePicker from 'expo-image-picker';

import { usePostSetToggleItem } from '@api/series';
import { ScrollView } from 'react-native-gesture-handler';
import { NAVIGATION_PAGES } from 'src/types';
import { API_HOST } from 'src/constants';
import { useGetDareRegionDataQuery, useGetNmRegionDataQuery } from '@api/regions';
import { StoreType, storage } from 'src/storage';
import { ButtonVariants } from 'src/types/components';
import { qualityOptions } from '../../TravelsScreen/utils/constants';
import moment from 'moment';
import { useRegion } from 'src/contexts/RegionContext';
import formatNumber from '../../TravelsScreen/utils/formatNumber';
import { PhotosData, Props, SeriesData, SeriesGroup, SeriesItem } from './types';
import ImageCarousel from './ImageCarousel';
import TravelSeriesList from './TravelSeriesList';

import MarkIcon from 'assets/icons/mark.svg';
import ChevronLeft from 'assets/icons/chevron-left.svg';
import CaseSvg from 'assets/icons/briefcase.svg';
import HouseSvg from 'assets/icons/house.svg';
import EditSvg from 'assets/icons/travels-screens/pen-to-square.svg';
import CalendarSvg from 'assets/icons/travels-screens/calendar.svg';
import RotateSvg from 'assets/icons/travels-screens/rotate.svg';
import MapSvg from 'assets/icons/travels-screens/map-location.svg';
import AddImgSvg from 'assets/icons/travels-screens/add-img.svg';
import { useGetTempQuery } from '@api/photos';

const RegionViewScreen: FC<Props> = ({ navigation, route }) => {
  const regionId = route.params?.regionId;
  const type = route.params?.type;
  const disabled = route.params?.disabled;
  const token = (storage.get('token', StoreType.STRING) as string) ?? null;
  const [isLoading, setIsLoading] = useState(true);
  const [isModalVisible, setModalVisible] = useState(false);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [activeIndex, setActiveIndex] = useState(0);
  const [indexSeries, setIndexSeries] = useState(0);
  const [routes, setRoutes] = useState<SeriesGroup[]>([]);
  const [series, setSeries] = useState<SeriesData[]>([]);
  const [photos, setPhotos] = useState<PhotosData[]>([]);
  const [name, setName] = useState(['', '']);
  const { data, refetch: refetchData, isFetchedAfterMount } =
    type === 'nm'
      ? useGetNmRegionDataQuery(regionId, type === 'nm', token && token)
      : useGetDareRegionDataQuery(regionId, type === 'dare', token && token);
  const { mutate: updateSeriesItem } = usePostSetToggleItem();
  const [isInfoModalVisible, setIsInfoModalVisible] = useState<boolean>(false);
  const [infoItem, setInfoItem] = useState<SeriesItem | null>(null);
  const [isEditModalVisible, setIsEditModalVisible] = useState(false);
  const [modalState, setModalState] = useState({
    selectedFirstYear: 2021,
    selectedLastYear: 2021,
    selectedQuality: qualityOptions[2],
    selectedNoOfVisits: 1,
    years: [],
    id: regionId
  });
  const { data: tempData, refetch } = useGetTempQuery(token, token ? true : false);

  const {
    handleUpdateNM: updateNM,
    handleUpdateDare: updateDare,
    userData: regionData,
    setUserData: setRegionData,
    handleUpdateNMList,
    handleUpdateDareList
  } = useRegion();

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

  useFocusEffect(
    useCallback(() => {
      const fetchGroups = async () => {
        let staticGroups = [
          {
            key: 'all',
            title: 'All',
            series_id: 0
          }
        ];
        const routesData = data?.data?.series?.map((item) => ({
          key: item.series_id?.toString(),
          title: item.series_name,
          series_id: item.series_id,
          icon: item.icon,
          items: item.items
        }));

        routesData && staticGroups.push(...routesData);

        setPhotos(
          data?.data?.photos?.slice(0, 100).map((item) => ({
            ...item,
            uriSmall: `${API_HOST}/ajax/pic/${item.id}/small`,
            uri: `${API_HOST}/ajax/pic/${item.id}/full`
          })) ?? []
        );

        const [regionName, ...rest] = data?.data?.region_name?.split(/ – | - /) ?? [];
        const subname = rest?.join(' - ');
        setName([regionName, subname]);
        setSeries(data?.data?.series || []);
        setRoutes(staticGroups);
        if (regionData?.id !== regionId) {
          setRegionData({ ...(data?.data || {}), type });
        }
        setIsLoading(false);
      };

      if (data && data.result === 'OK') {
        fetchGroups();
      }
    }, [data])
  );

  useFocusEffect(
    useCallback(() => {
      refetchData()
    }, [navigation, token])
  );

  useEffect(() => {
    if (data && data.data) {
      setRegionData({ ...(data?.data || {}), type });
    }
  }, [isFetchedAfterMount])

  const handleCheckboxChange = useCallback(
    async (item: SeriesItem, double: boolean, seriesId: number) => {
      setSeries((currentData) => {
        const groupIndex = currentData.findIndex((group) => group?.series_id === seriesId);

        if (groupIndex === -1) return currentData;

        const newData = [...currentData];
        const newGroup = { ...newData[groupIndex] };

        newGroup.items = newGroup.items.map((subItem) =>
          subItem.id === item.id
            ? {
                ...subItem,
                ...(double
                  ? { visited_double: subItem.visited_double === 0 ? 1 : 0 }
                  : { visited: subItem.visited === 0 ? 1 : 0 })
              }
            : subItem
        );

        newData[groupIndex] = newGroup;
        return newData;
      });

      const itemData = {
        token: token,
        series_id: seriesId,
        item_id: item.id,
        checked: (item.visited === 1 ? 0 : 1) as 0 | 1,
        double: (double && !item.visited_double ? 1 : 0) as 0 | 1
      };

      try {
        updateSeriesItem(itemData);
      } catch (error) {
        console.error('Failed to update checkbox state', error);
      }
    },
    [token, updateSeriesItem]
  );

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

  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 openModal = (index: number) => {
    setCurrentImageIndex(index);
    setModalVisible(true);
  };

  if (isLoading) return <Loading />;

  const handleOpenEditModal = () => {
    // handleModalStateChange({
    //   selectedFirstYear: regionData?.first_visit_year,
    //   selectedLastYear: regionData?.last_visit_year,
    //   selectedQuality:
    //     qualityOptions.find((quality) => quality.id === regionData?.best_visit_quality) ||
    //     qualityOptions[2],
    //   selectedNoOfVisits: regionData?.no_of_visits || 1,
    //   id: regionId
    // });
    // setIsEditModalVisible(true);
    // navigation.navigate(NAVIGATION_PAGES.EDIT_NM_DATA, { regionId: regionId });
    let regionName = name[0];
    if (name[1]) {
      regionName = name.join(' - ');
    }
    navigation.navigate(NAVIGATION_PAGES.TRIPS_2025, {
      region: { id: regionId, name: regionName }
    });
  };

  const handleUpdateNmModal = (
    region: number = regionId,
    first: number,
    last: number,
    visits: number,
    quality: number
  ) => {
    const updatedNM = {
      ...regionData,
      first_visit_year: first,
      last_visit_year: last,
      best_visit_quality: quality,
      no_of_visits: visits,
      visited: visits > 0 ? true : false
    };

    route.params?.isTravelsScreen
      ? handleUpdateNMList(region, first, last, visits, quality)
      : updateNM(region, first, last, visits, quality);
    updatedNM && setRegionData(updatedNM);
  };

  const handleUpdateNm = () => {
    route.params?.isTravelsScreen
      ? handleUpdateNMList(
          regionId,
          regionData.visited ? 0 : 1,
          regionData.visited ? 0 : 1,
          regionData.visited ? 0 : 1,
          3
        )
      : updateNM(
          regionId,
          regionData.visited ? 0 : 1,
          regionData.visited ? 0 : 1,
          regionData.visited ? 0 : 1,
          3
        );

    setRegionData({
      ...regionData,
      first_visit_year: regionData.visited ? 0 : 1,
      last_visit_year: regionData.visited ? 0 : 1,
      best_visit_quality: 3,
      no_of_visits: regionData.visited ? 0 : 1,
      visited: !regionData.visited
    });
  };

  const handleUpdateDare = () => {
    route.params?.isTravelsScreen
      ? handleUpdateDareList(regionId, regionData.visited ? 0 : 1)
      : updateDare(regionId, regionData.visited ? 0 : 1);

    setRegionData({
      ...regionData,
      first_visit_year: regionData.visited ? 0 : 1,
      last_visit_year: regionData.visited ? 0 : 1,
      best_visit_quality: 3,
      no_of_visits: regionData.visited ? 0 : 1,
      visited: !regionData.visited
    });
  };

  const handleImagePick = async () => {
    setIsLoading(true);

    const photosData = {
      id: regionId,
      country: name[0],
      name: name[1],
      flag: '',
      nm: type === 'nm',
      dare: type === 'dare',
      photos: []
    };

    await refetch().then(async (temp) => {
      if (temp.data?.photos && temp.data?.photos.length > 0) {
        setIsLoading(false);
        navigation.navigate(
          ...([
            NAVIGATION_PAGES.ADD_PHOTO,
            {
              data: photosData,
              images: [],
              allRegions: [],
              tempData: temp.data.photos
            }
          ] as never)
        );
      } else {
        setIsLoading(false);

        let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.Images,
          quality: 1,
          allowsMultipleSelection: true,
          exif: true
        });

        if (!result.canceled) {
          navigation.navigate(
            ...([
              NAVIGATION_PAGES.ADD_PHOTO,
              {
                data: photosData,
                images: result.assets,
                allRegions: []
              }
            ] as never)
          );
        }
      }
    });
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => {
          navigation.goBack();
        }}
        style={styles.backButton}
      >
        <View style={styles.chevronWrapper}>
          <ChevronLeft fill={Colors.WHITE} />
        </View>
      </TouchableOpacity>

      <ScrollView
        contentContainerStyle={{}}
        nestedScrollEnabled={true}
        showsVerticalScrollIndicator={false}
      >
        {photos.length > 0 ? (
          <ImageCarousel
            photos={photos}
            activeIndex={activeIndex}
            setActiveIndex={setActiveIndex}
            openModal={openModal}
          />
        ) : (
          <View style={styles.emptyImage}>
            <Image
              source={require('../../../../../assets/images/logo-opacity.png')}
              style={{ width: 100, height: 100 }}
            />
            <Text style={styles.emptyImageText}>No image available at this location</Text>
          </View>
        )}
        {regionData?.visited ? (
          <TouchableOpacity onPress={handleImagePick} style={styles.addPhotoButton}>
            <View style={styles.chevronWrapper}>
              <AddImgSvg fill={Colors.WHITE} width={20} height={20} />
            </View>
          </TouchableOpacity>
        ) : null}

        <TouchableOpacity
          onPress={() => {
            route.params?.isTravelsScreen || route.params?.isProfileScreen
              ? navigation.dispatch(
                  CommonActions.reset({
                    index: 1,
                    routes: [
                      {
                        name: NAVIGATION_PAGES.IN_APP_MAP_TAB,
                        state: {
                          routes: [
                            {
                              name: NAVIGATION_PAGES.MAP_TAB,
                              params: { id: regionId, type: type === 'nm' ? 'regions' : 'places' }
                            }
                          ]
                        }
                      }
                    ]
                  })
                )
              : navigation.goBack();
          }}
          style={styles.goToMapBtn}
        >
          <View style={styles.chevronWrapper}>
            <MapSvg fill={Colors.WHITE} />
          </View>
        </TouchableOpacity>

        <View style={{ gap: 16 }}>
          <View
            style={[styles.margin, { flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }]}
          >
            {regionData?.visited && regionData?.first_visit_year > 1 && !disabled && (
              <View style={styles.infoContent}>
                <CalendarSvg height={18} width={18} fill={Colors.DARK_BLUE} />
                <Text style={styles.visitedButtonText}>{regionData?.first_visit_year}</Text>
              </View>
            )}

            {regionData?.visited && type === 'nm' && !disabled && (
              <View style={styles.infoContent}>
                <RotateSvg fill={Colors.DARK_BLUE} />
                <Text style={styles.visitedButtonText}>
                  {regionData.no_of_visits >= 10 ? '10+' : regionData.no_of_visits}
                </Text>
              </View>
            )}
          </View>
          <View style={[styles.nameContainer, styles.margin]}>
            <Text style={styles.title}>{name[0]}</Text>
            <View style={ButtonStyles.btnContainer}>
              {/* {regionData?.visited &&
              type === 'nm' &&
              !disabled &&
              regionData?.no_of_visits === 1 ? (
                <TouchableOpacity onPress={handleOpenEditModal} style={ButtonStyles.editBtn}>
                  <EditSvg width={14} height={14} />
                </TouchableOpacity>
              ) : null} */}
              {regionData.future ? (
                <View style={{ flex: 1 }}>
                  <Text
                    style={{
                      fontSize: 10,
                      fontWeight: '500',
                      color: Colors.DARK_BLUE,
                      flexShrink: 1,
                      fontStyle: 'italic'
                    }}
                  >
                    Visits planned in the future
                  </Text>
                </View>
              ) : null}
              {!disabled ? (
                <TouchableOpacity
                  style={[
                    ButtonStyles.btn,
                    (regionData?.visited || regionData.edit_in_trips === 1) && !disabled
                      ? ButtonStyles.visitedButton
                      : ButtonStyles.markVisitedButton
                  ]}
                  onPress={() => {
                    if (regionData?.type === 'nm' && regionData?.edit_in_trips === 1) {
                      handleOpenEditModal();
                      return;
                    }
                    type === 'nm' ? handleUpdateNm() : handleUpdateDare();
                  }}
                >
                  {regionData.edit_in_trips === 1 && !disabled && regionData?.type === 'nm' ? (
                    <View style={ButtonStyles.visitedContainer}>
                      <EditSvg width={14} height={14} />
                      <Text style={ButtonStyles.visitedButtonText}>Edit</Text>
                    </View>
                  ) : regionData?.visited ? (
                    <View style={ButtonStyles.visitedContainer}>
                      <MarkIcon width={16} height={16} />
                      <Text style={ButtonStyles.visitedButtonText}>Visited</Text>
                    </View>
                  ) : (
                    <Text style={[ButtonStyles.markVisitedButtonText]}>Mark Visited</Text>
                  )}
                </TouchableOpacity>
              ) : null}
            </View>
          </View>

          <Text style={[styles.subtitle, styles.margin]}>{name[1]}</Text>

          <View style={[styles.divider, styles.margin]} />

          <View style={[styles.stats, styles.margin]}>
            {(data?.data.users_from_region_count ?? 0 > 0) ? (
              <TouchableOpacity
                style={[styles.statItem, { justifyContent: 'flex-start' }]}
                onPress={() =>
                  navigation.navigate(
                    ...([
                      NAVIGATION_PAGES.USERS_LIST,
                      {
                        id: regionId,
                        isFromHere: true,
                        type: 'nm'
                      }
                    ] as never)
                  )
                }
              >
                <View style={styles.icon}>
                  <HouseSvg />
                </View>
                <View
                  style={{
                    height: 12,
                    width: 1,
                    backgroundColor: Colors.DARK_BLUE,
                    marginRight: 6
                  }}
                />
                <View style={styles.userImageContainer}>
                  {data?.data.users_from_region &&
                    data?.data.users_from_region.length > 0 &&
                    data?.data.users_from_region?.map((user, index: number) => (
                      <Image
                        key={index}
                        source={{ uri: API_HOST + user }}
                        style={styles.userImage}
                      />
                    ))}
                  <View style={styles.userCountContainer}>
                    <Text style={styles.userCount}>
                      {formatNumber(data?.data?.users_from_region_count ?? 0)}
                    </Text>
                  </View>
                </View>
              </TouchableOpacity>
            ) : (
              <View style={[styles.statItem, { justifyContent: 'flex-start' }]} />
            )}

            {(data?.data.users_who_visited_region_count ?? 0 > 0) ? (
              <TouchableOpacity
                style={[styles.statItem, { justifyContent: 'flex-end' }]}
                onPress={() =>
                  navigation.navigate(
                    ...([
                      NAVIGATION_PAGES.USERS_LIST,
                      {
                        id: regionId,
                        isFromHere: false,
                        type
                      }
                    ] as never)
                  )
                }
              >
                <View style={styles.icon}>
                  <CaseSvg />
                </View>
                <View
                  style={{
                    height: 12,
                    width: 1,
                    backgroundColor: Colors.DARK_BLUE,
                    marginRight: 6
                  }}
                />

                <View style={styles.userImageContainer}>
                  {data?.data.users_who_visited_region &&
                    data?.data.users_who_visited_region.length > 0 &&
                    data?.data.users_who_visited_region?.map((user, index) => (
                      <Image
                        key={index}
                        source={{ uri: API_HOST + user }}
                        style={[styles.userImage]}
                      />
                    ))}
                  <View style={styles.userCountContainer}>
                    <Text style={styles.userCount}>
                      {formatNumber(data?.data.users_who_visited_region_count ?? 0)}
                    </Text>
                  </View>
                </View>
              </TouchableOpacity>
            ) : (
              <View style={[styles.statItem, { justifyContent: 'flex-end' }]} />
            )}
          </View>

          <View style={[styles.divider, styles.margin, { marginBottom: 8 }]} />

          {series.length > 0 ? (
            <>
              <Text style={[styles.travelSeriesTitle, styles.margin]}>TRAVEL SERIES</Text>
              <HorizontalTabView
                index={indexSeries}
                setIndex={setIndexSeries}
                routes={routes}
                renderScene={({ route }: { route: any }) => <View style={{ height: 0 }} />}
                maxTabHeight={50}
              />
              <View style={styles.margin}>
                <TravelSeriesList
                  series={series}
                  indexSeries={indexSeries}
                  routes={routes}
                  handleCheckboxChange={handleCheckboxChange}
                  setIsInfoModalVisible={setIsInfoModalVisible}
                  setInfoItem={setInfoItem}
                  disabled={disabled}
                />
              </View>
            </>
          ) : null}
        </View>

        <CustomImageViewer
          images={photos}
          imageIndex={currentImageIndex}
          visible={isModalVisible}
          onRequestClose={() => setModalVisible(false)}
          onImageIndexChange={setActiveIndex}
          backgroundColor={Colors.DARK_BLUE}
          renderFooter={(imageIndex: number) => (
            <View style={styles.imageFooter}>
              <Text style={styles.imageDescription}>{photos[imageIndex].title}</Text>
              <TouchableOpacity
                onPress={() => {
                  setModalVisible(false);
                  navigation.navigate(
                    ...([
                      NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW,
                      { userId: photos[imageIndex].user_id, hideTabBar: true }
                    ] as never)
                  );
                }}
                disabled={disabled}
                style={styles.imageOwner}
              >
                <Text style={styles.imageOwnerText}>{photos[imageIndex].first_name}</Text>
                <Text style={styles.imageOwnerText}>{photos[imageIndex].last_name}</Text>
              </TouchableOpacity>
            </View>
          )}
        />

        <ReactModal
          visible={isInfoModalVisible}
          children={
            <View style={styles.modalView}>
              <Text style={styles.infoTitle}>{infoItem?.name}</Text>
              <Text style={styles.infoText}>{infoItem?.description}</Text>
              <Button
                variant={ButtonVariants.OPACITY}
                containerStyles={styles.btnContainer}
                textStyles={{
                  color: Colors.DARK_BLUE
                }}
                onPress={() => setIsInfoModalVisible(false)}
                children={'Got it'}
              />
            </View>
          }
          onRequestClose={() => setIsInfoModalVisible(false)}
          headerTitle={'Info'}
          visibleInPercent={'auto'}
        />
      </ScrollView>
      <EditNmModal
        isVisible={isEditModalVisible}
        onClose={() => setIsEditModalVisible(false)}
        modalState={modalState}
        updateModalState={handleModalStateChange}
        updateNM={handleUpdateNmModal}
      />
    </View>
  );
};

export default RegionViewScreen;