import {Button, Flex, Spinner, Text, Box, Collapsible, Highlight} 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 IvansAlerts({ settings, widgetID }) {
console.log("Ivans settings: ", settings, "Ivans widgetID: ", widgetID);
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
// find this specific widgets object in the state list of active/displayed widgets and extract its uuid
const thisWidget = useDashboardStore(useCallback((state) =>
state.widgets.find((widget) => widget.id === widgetID), [widgetID]
));
// build url, default is 7 days past
const url = useBuildUrl('/api/v2/comm_coor_ivans', 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, isLoading, error} = VdapApi(url);
// sort the apiData
const some_data = useMemo(() => {
if (data?.length === 0) return [];
const sorts = settings?.activeSorts;
if (sorts?.volcanoSort && sorts?.timeSort === "asc") return [...data].sort(ascTimeVolcanoSort);
else if (sorts?.volcanoSort && sorts?.timeSort === "desc") return [...data].sort(descTimeVolcanoSort);
else if (sorts?.timeSort === "asc") return [...data].sort(ascTimeSort);
else return [...data].sort(descTimeSort);
}, [data, settings]);
// copy data to clipboard in formatted way when user clicks on copy btn in widget settings
useEffect(() => {
if (settings?.copyToClipboard === true) {
const dataText = some_data.map((item) => {
return `${item.volcano_name}\n` +
`Report Number: ${item.report_num}\n` +
`Send Time: ${item.send_time}\n` +
`Preparer: ${item.preparer}\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, some_data, widgetID, updateSettings]);
// Cleaned hardcoded grays for transparent so glass shell shows through
if (isLoading) return (
);
if (error) return (
{error}
);
if (some_data.length === 0) return (
No flight level data available for the selected dates.
);
return (
{some_data.map((item, index) => {
if (thisWidget?.size === "large") return (
{/* Using context to dynamically change the border radii of the triggers */}
{(collapsible) => (
<>
{item.volcano_name}
{item.send_time}
{item.report_num}
{/* This box needs to be at h="100%" for the pdf toolbar to appear */}
Preparer: {item?.preparer}
{item?.summary}
{item?.files?.map((file, index) => {
return (
File: {file?.name}
{/**/}
{/* Open*/}
{/**/}
)})}
)}
)
else if (thisWidget?.size === "small") return (
{item.volcano_name}
{item.send_time}
{item.report_num}
)
})}
);
}
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.send_time);
const bTime = new Date(b.send_time);
if (aTime > bTime) return 1;
if (aTime < bTime) return -1;
return 0;
}
function descTimeSort(a, b) {
const aTime = new Date(a.send_time);
const bTime = new Date(b.send_time);
if (aTime > bTime) return -1;
if (aTime < bTime) return 1;
return 0;
}