Web-Frontend/client/src/components/Widgets/IvansAlerts.jsx

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 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 (
    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
      <Spinner size="xl" color="blue.400" thickness="4px"/>
    </Flex>
  );

  if (error) return (
    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
      <Text color="red.400">{error}</Text>
    </Flex>
  );

  if (some_data.length === 0) return (
    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
      <Text textAlign="center" color="widgetTextMuted">No flight level data available for the selected dates.</Text>
    </Flex>
  );

  return (
    <Flex direction="column"
          w="100%" h="100%"
          pos="relative"
          justify="top" align="center"
          p={2} gap={2}
          overflow="auto"
          borderRadius="xl"
          bg="transparent" // Let the global widgetRecipe glass shell show through
    >
      {some_data.map((item, index) => {
        if (thisWidget?.size === "large") return (
          <Collapsible.Root key={index} w="100%">
            {/* Using context to dynamically change the border radii of the triggers */}
            <Collapsible.Context>
              {(collapsible) => (
                <>
                  <Collapsible.Trigger w="100%">
                    <Flex
                      direction="row"
                      w="100%" h="100%"
                      justify="space-between" align="center"
                      p={1} pl={3} pr={3}
                      gap={2}
                      borderTopRadius="lg"
                      borderBottomRadius={collapsible.open ? "0" : "lg"}
                      bg="widgetItemBg"
                    >
                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
                        <Text truncate>{item.volcano_name}</Text>
                        <Text truncate fontSize="xs" color="widgetTextMuted">{item.send_time}</Text>
                      </Flex>
                      <Flex w="100%" minW={0} justify="right">
                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">{item.report_num}</Text>
                      </Flex>
                    </Flex>
                  </Collapsible.Trigger>
                  <Collapsible.Content w="100%" h="auto">
                    {/* This box needs to be at h="100%" for the pdf toolbar to appear */}
                    <Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="widgetItemExpandedBg">
                      <Flex direction="column" gap={2} bg="widgetItemBg" borderRadius="lg" p={2} align="end">
                        <Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
                        <Text w="fit" fontSize="sm" color="text" pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md">Preparer: {item?.preparer}</Text>
                      </Flex>
                      {item?.files?.map((file, index) => {
                        return (
                          <Box w="100%" h="100%" key={index} p={1}>
                            <br />
                            <Flex mb={2} justify="space-between">
                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
                              <Box borderRadius="lg" bg="widgetBadgeBg" color="text" pl={1} pr={1} fontSize={13} asChild>
                                <a href={`${file?.url}#view=FitV&toolbar=1`} target="_blank" rel="noopener noreferrer">
                                  Open
                                </a>
                              </Box>
                            </Flex>
                            <object
                              data={`${file?.url}#view=FitH&toolbar=1`}
                              type="application/pdf"
                              style={{ width: '100%', height: '100%', display: 'block' }}
                            >
                              <Flex w="100%" h="100%" p={4} color="widgetTextMuted">
                                <Text mb={2}>
                                  Your browser cannot display this PDF directly.
                                </Text>
                                <a href={file?.url} target="_blank">
                                  Download PDF
                                </a>
                              </Flex>
                            </object>
                          </Box>
                        )})}
                    </Box>
                  </Collapsible.Content>
                </>
              )}
            </Collapsible.Context>
          </Collapsible.Root>
        )
        else if (thisWidget?.size === "small") return (
          <Flex direction="row"
                key={index} // Added missing map key
                w="100%"
                justify="space-between" align="center"
                p={1} pl={3} pr={3}
                gap={2}
                borderRadius="lg"
                bg="widgetItemBg"
          >
            <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
              <Text truncate>{item.volcano_name}</Text>
              <Text truncate fontSize="xs" color="widgetTextMuted">{item.send_time}</Text>
            </Flex>
            <Flex w="100%" minW={0} justify="right">
              <Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">{item.report_num}</Text>
            </Flex>
          </Flex>
        )
      })}
    </Flex>
  );
}


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;
}