import React, { useState, useRef, useEffect } from 'react'; import styled from 'styled-components'; import { useCallFeed } from '../hooks/useCallFeed'; import { Platform, Linking, View, ScrollView, Text, TouchableOpacity } from 'react-native'; import { StatusBar } from 'expo-status-bar'; import { SafeAreaView } from 'react-native-safe-area-context'; import { Ionicons } from '@expo/vector-icons'; import { AccidentAndEmergency } from "healthicons-react-native/dist/outline"; import { Phone } from "healthicons-react-native/dist/filled"; import { PageHeader, PageFooter, } from '../components/generalHelpers.jsx'; import ActionSheet from 'react-native-actions-sheet'; const DepartmentActionSheet = styled(ActionSheet)``; export default function Landing() { const actionSheetRef = useRef(null); const callFeed = useCallFeed(); const { departments, callIconMap, callDetails, callColorSelector, } = callFeed; const { departmentTypeMap, accountDetails, selectedDepartment, setSelectedDepartment, updateSelectedDepartment, selectedDepartmentColorPicker, deptList, } = departments; const { Incident, Address, Person, Response } = callDetails; const { CallThemes } = accountDetails; const { IncID, IncNumber, JurisdictionNumber, ServiceNumber, ServiceID, IncDate, IncNature, IncNatureCode, IncNatureCodeDesc, Notes, Status, Origin, } = Incident; const { StreetAddress, AddressApartment, Town, State, ZipCode, Latitude, Longitude, County, Intersection1, Intersection2, LocationName, WeatherCondition, } = Address; const { Name, Age, Gender, Statement, Conscious, Breathing, CallBackNumber, } = Person; const { Units } = Response; const SelectedIcon = callIconMap[IncNature] || AccidentAndEmergency; const ownDepartmentResponse = Units?.map((unit) => { if (unit?.Department === selectedDepartment?.dept || selectedDepartment?.addDepts?.includes(unit?.Department)) { return unit; } return null; })?.filter((filterItem) => { return filterItem; }); const mutualAidDepartmentResponse = Units?.map((unit) => { if (unit?.Department !== selectedDepartment?.dept && !selectedDepartment?.addDepts?.includes(unit?.Department)) { return unit; } return null; })?.filter((filterItem) => { return filterItem; });; const formatCallTimePast = (callValue) => { const initDate = new Date(callValue); const currentTime = new Date(); const timeDifference = currentTime - initDate; const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000); if (days && days !== 0) { return `${days} day${days === 1 ? '' : 's'} ago`; } else if (hours && hours !== 0) { return `${hours} hour${hours === 1 ? '' : 's'} ago`; } else if (minutes && minutes !== 0) { return `${minutes} minute${minutes === 1 ? '' : 's'} ago`; } else if (seconds && seconds !== 0) { return `${seconds} second${seconds === 1 ? '' : 's'} ago`; } return `Unknown Time Past`; } const formatCallDateTime = (callValue) => { const initDate = new Date(callValue); if (initDate) { const formattedDate = `${initDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', })}`; const hours = initDate.getHours().toString().padStart(2, '0'); const minutes = initDate.getMinutes().toString().padStart(2, '0'); const formattedTime = `${hours}:${minutes}`; return `${formattedDate} - ${formattedTime}`; } return 'Date Unavailable'; } const formatResponseTimes = (time) => { if (time === null) { return ''; } const initTime = new Date(time); const hours = initTime.getHours().toString().padStart(2, '0'); const minutes = initTime.getMinutes().toString().padStart(2, '0'); return `${hours}:${minutes}`; }; const openMaps = (latitude, longitude) => { const daddr = `${latitude},${longitude}`; const company = Platform.OS === "ios" ? "apple" : "google"; Linking.openURL(`http://maps.${company}.com/maps?daddr=${daddr}`); }; const callNumber = (number) => { const formattedNumber = number.replace(/[()\-\s]/g, ''); Linking.openURL(`tel:${formattedNumber}`); }; return ( { actionSheetRef.current?.show(); }} > {selectedDepartment?.deptAbv} {formatCallDateTime(IncDate)} {formatCallTimePast(IncDate)} {`${IncNature}`} {`${IncNatureCodeDesc}`} {Status === 'CLOSED' ? ( This Incident is Closed. ) : } {`Incident #: ${ServiceNumber}`} {LocationName ? ( {`${LocationName}`} ) : null } { return openMaps(Latitude, Longitude); }} > {`${StreetAddress}`} {`${Town}, ${State}`} {AddressApartment ? ( {`${AddressApartment}`} ) : null} Map { return openMaps(Latitude, Longitude); }} > Nav {Intersection1} {Intersection2} {selectedDepartment?.supervisor ? ( {`${Name}`} { return callNumber(CallBackNumber); }} > {`${CallBackNumber}`} { return callNumber(CallBackNumber); }} > ) : null } {`${Age} `} {`${Gender} - `} {`Concious: ${Conscious} | `} {`Breathing: ${Breathing}`} {`${Statement}`} {Units?.length > 0 ? ( {ownDepartmentResponse?.length > 0 ? ( Units Disp Resp Arr {selectedDepartment?.type === 'EMS' || selectedDepartment?.type === 'Rescue' ? ( Trans ) : null} BIS {ownDepartmentResponse?.map((unit) => { return ( {unit?.Unit} {formatResponseTimes(unit?.Dispatched)} {formatResponseTimes(unit?.Responding)} {formatResponseTimes(unit?.OnScene)} {selectedDepartment?.type === 'EMS' || selectedDepartment?.type === 'Rescue' ? ( {formatResponseTimes(unit?.Transporting)} ) : null } {formatResponseTimes(unit?.InService)} ) })} ) : ( {`No ${selectedDepartment?.dept} Units Responding`} ) } {mutualAidDepartmentResponse?.length > 0 ? ( M/A Disp Resp Arr {selectedDepartment?.type === 'EMS' || selectedDepartment?.type === 'Rescue' ? ( Trans ) : null} BIS {mutualAidDepartmentResponse?.map((unit) => { return ( {unit?.Unit} {formatResponseTimes(unit?.Dispatched)} {formatResponseTimes(unit?.Responding)} {formatResponseTimes(unit?.OnScene)} {selectedDepartment?.type === 'EMS' || selectedDepartment?.type === 'Rescue' ? ( {formatResponseTimes(unit?.Transporting)} ) : null } {formatResponseTimes(unit?.InService)} ) })} ) : null } ) : ( No Units Responding )} Incident Notes {Notes?.split('\n').map((note, index) => ( {note} {index < Notes.split('\n').length - 1 && ( )} ))} {deptList?.map((item) => { return ( { actionSheetRef.current?.hide(); return updateSelectedDepartment( selectedDepartment?.deptId, item?.deptId ) }} > {item?.dept} {item?.primary ? : null} {`${item?.deptAbv} - ${departmentTypeMap[item?.type]}`} ); })} ); }