import {Button, Flex, Spinner, Text, Box, Collapsible} from "@chakra-ui/react";
import {useEffect, useMemo, useCallback} from 'react';
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
import VdapApi from '@/hooks/useVdapApi.js';
import useBuildUrl from "@/hooks/useBuildUrl.js";
export default function RemoteSensing({ settings, widgetID }) {
console.log("RS settings: ", settings, "RS ID: ", widgetID);
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
// Find this specific widgets object in the state list of active & displayed widgets
const thisWidget = useDashboardStore(useCallback((state) =>
state.widgets.find((widget) => widget.id === widgetID), [widgetID]
));
// build url, defaults to 7 days past
const url = useBuildUrl('/api/v2/remote_sensing', settings?.startDate, settings?.endDate);
// VdapApi hook only calls api if the url changes and apiData remains stable since vdapApi uses state to track the data
const {data: apiData, isLoading, error} = VdapApi(url);
// sort apiData
const data = useMemo(() => {
if (apiData?.length === 0) return [];
const sorts = settings?.activeSorts;
if (sorts?.volcanoSort && sorts?.timeSort === "asc") return [...apiData].sort(ascTimeVolcanoSort);
else if (sorts?.volcanoSort && sorts?.timeSort === "desc") return [...apiData].sort(descTimeVolcanoSort);
else if (sorts?.timeSort === "asc") return [...apiData].sort(ascTimeSort);
else return [...apiData].sort(descTimeSort);
}, [apiData, settings]);
// check if user wants to copy all RS
useEffect(() => {
if(settings?.copyToClipboard === true) {
const dataText = data.map((item) => {
return `${item.country}, ${item.volcano_name}\n` +
`Report Time: ${item.report_time}\n` +
`Sender: ${item.sender}\n` +
`Summary:\n${item.summary}\n`;
}).join('\n\n');
navigator.clipboard.writeText(dataText)
.then(() => {
alert('Copied to clipboard!');
})
.catch((err => {
console.error('Failed to copy: ', err);
}));
updateSettings(widgetID, {copyToClipboard: false});
}
}, [settings, data, widgetID, updateSettings]);
if (isLoading) return (
);
if (error) return (
{error}
);
if (data.length === 0) return (
No Remote Sensing data available this week.
);
return (
{data.map((item, index) => {
if (thisWidget?.size === "large" || thisWidget?.size === "medium") return (
{/* Using context to dynamically change the border radii of the triggers */}
{(collapsible) => (
<>
{item?.volcano_name}
{item?.country}
{item?.report_time}
{/* This box needs to be at h="100%" for the pdf toolbar to appear */}
{item?.summary}
Source: {item?.sender}
{item?.files?.map((file, index) => {
// PDF FILE TYPE
if (file?.type === "pdf") return (
{file?.name}
PDF
);
// IMAGE FILE TYPE
else if (file?.type === "image") return (
{file?.name}
PNG
);
// DOWNLOADABLE LINK
else if (file?.type === "download") return (
<>
{file?.name}
)
})}
)}
)
else if (thisWidget?.size === "small") return (
{item?.volcano_name}
{item?.country}
{item?.report_time}
)
})}
);
}
function ascTimeVolcanoSort(a, b) {
if (a.volcano_name < b.volcano_name) return -1
else if (a.volcano_name > b.volcano_name) return 1
else return ascTimeSort(a, b);
}
function descTimeVolcanoSort(a, b) {
if (a.volcano_name < b.volcano_name) return -1
else if (a.volcano_name > b.volcano_name) return 1
else return descTimeSort(a, b);
}
function ascTimeSort(a, b) {
const aTime = new Date(a.report_time);
const bTime = new Date(b.report_time);
if (aTime > bTime) return 1;
if (aTime < bTime) return -1;
return 0;
}
function descTimeSort(a, b) {
const aTime = new Date(a.report_time);
const bTime = new Date(b.report_time);
if (aTime > bTime) return -1;
if (aTime < bTime) return 1;
return 0;
}