import React, { FC, useCallback, useEffect, useState } from 'react'; import { View, Text, Image, TouchableOpacity, Platform } from 'react-native'; import ImageView from 'better-react-native-image-viewing'; import { styles } from './styles'; import { Button, EditNmModal, HorizontalTabView, Loading, Modal as ReactModal } from 'src/components'; import { useFocusEffect } from '@react-navigation/native'; import { Colors } from 'src/theme'; import { styles as ButtonStyles } from 'src/components/RegionPopup/style'; 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'; const RegionViewScreen: FC = ({ 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; 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([]); const [series, setSeries] = useState([]); const [photos, setPhotos] = useState([]); const [name, setName] = useState(['', '']); const { data } = type === 'nm' ? useGetNmRegionDataQuery(regionId, type === 'nm', token && token) : useGetDareRegionDataQuery(regionId, type === 'dare', token && token); const { mutate: updateSeriesItem } = usePostSetToggleItem(); const [isInfoModalVisible, setIsInfoModalVisible] = useState(false); const [infoItem, setInfoItem] = useState(null); const [isEditModalVisible, setIsEditModalVisible] = useState(false); const [modalState, setModalState] = useState({ selectedFirstYear: 2021, selectedLastYear: 2021, selectedQuality: qualityOptions[2], selectedNoOfVisits: 1, years: [], id: regionId }); 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?.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); setIsLoading(false); }; if (data && data.result === 'OK') { fetchGroups(); } }, [data]) ); 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 ; 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); }; 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 }); }; return ( { navigation.goBack(); }} style={styles.backButton} > {photos.length > 0 ? ( ) : ( No image available at this location )} {regionData?.visited && regionData?.first_visit_year > 1 && !disabled && ( {regionData?.first_visit_year} )} {regionData?.visited && type === 'nm' && !disabled && ( {regionData.no_of_visits >= 10 ? '10+' : regionData.no_of_visits} )} {name[0]} {regionData?.visited && type === 'nm' && !disabled ? ( ) : null} {!disabled ? ( (type === 'nm' ? handleUpdateNm() : handleUpdateDare())} > {regionData?.visited ? ( Visited ) : ( Mark Visited )} ) : null} {name[1]} {data?.data.users_from_region_count ?? 0 > 0 ? ( navigation.navigate( ...([ NAVIGATION_PAGES.USERS_LIST, { id: regionId, isFromHere: true, type: 'nm' } ] as never) ) } > {data?.data.users_from_region && data?.data.users_from_region.length > 0 && data?.data.users_from_region?.map((user, index: number) => ( ))} {formatNumber(data?.data?.users_from_region_count ?? 0)} ) : ( )} {data?.data.users_who_visited_region_count ?? 0 > 0 ? ( navigation.navigate( ...([ NAVIGATION_PAGES.USERS_LIST, { id: regionId, isFromHere: false, type } ] as never) ) } > {data?.data.users_who_visited_region && data?.data.users_who_visited_region.length > 0 && data?.data.users_who_visited_region?.map((user, index) => ( ))} {formatNumber(data?.data.users_who_visited_region_count ?? 0)} ) : ( )} {series.length > 0 ? ( <> TRAVEL SERIES } /> ) : null} setModalVisible(false)} backgroundColor={Colors.DARK_BLUE} onImageIndexChange={setActiveIndex} FooterComponent={({ imageIndex }) => ( {photos[imageIndex].title} { setModalVisible(false); navigation.navigate( ...([ NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW, { userId: photos[imageIndex].user_id, hideTabBar: true } ] as never) ); }} disabled={disabled} style={styles.imageOwner} > {photos[imageIndex].first_name} {photos[imageIndex].last_name} )} /> {infoItem?.name} {infoItem?.description}