Web-Frontend/client/src/components/Widgets/RemoteSensing.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 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 (
    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="md" bg="gray.800">
      <Spinner size="xl" color="blue.400" thickness="4px"/>
    </Flex>
  );

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

  if (data.length === 0) return (
    <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
      <Text color="gray.400">No Remote Sensing data available this week.</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="gray.800">
      {data.map((item, index) => {
        if (thisWidget?.size === "large" || thisWidget?.size === "medium") 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%" overflow="hidden">
                    <Flex direction="row" w="100%" h="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3}
                          borderTopRadius="lg" borderBottomRadius={collapsible.open ? "0" : "lg"} bg="gray.600"
                    >
                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
                        <Text truncate>{item?.volcano_name}</Text>
                        <Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
                      </Flex>
                      <Flex w="100%" minW={0} justify="right">
                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm" fontWeight="semibold">
                          {item?.report_time}
                        </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="gray.700/45">
                      <Flex direction="column" gap={2} bg="gray.800/75" borderRadius="lg" p={2} align="end">
                        <Text w="100%" h="100%" fontSize="sm" color="gray.100" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
                        <Text w="fit" fontSize="sm" color="gray.200" pl={1} pr={1} bg="gray.700/50" borderRadius="md">Source: {item?.sender}</Text>
                      </Flex>
                      {item?.files?.map((file, index) => {

                        // PDF FILE TYPE
                        if (file?.type === "pdf") return (
                          <Box w="100%" h="100%" key={index} p={1}>
                            <br />
                            <Flex dir="row" justify="space-between" align="center" mb={2}>
                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300/90">PDF</Text>
                            </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="gray.400">
                                <Text mb={2} color="fg.muted">
                                  Your browser cannot display this PDF directly.
                                </Text>
                                <a href={file?.url} target="_blank">
                                  Download PDF
                                </a>
                              </Flex>
                            </object>
                          </Box>
                        );

                        // IMAGE FILE TYPE
                        else if (file?.type === "image") return (
                          <Box key={index} w="100%" h="100%" p={1}>
                            <br />
                            <Flex dir="row" justify="space-between" align="center" mb={2}>
                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300/90">PNG</Text>
                            </Flex>
                            <a href={file?.url} target="_blank" rel="noopener noreferrer">
                              <img src={file?.url} alt={file?.name} />
                            </a>
                          </Box>
                        );

                        // DOWNLOADABLE LINK
                        else if (file?.type === "download") return (
                          <>
                            <br />
                            <Flex key={index} dir="row" w="100%" h="100%" p={1} align="center" justify="space-between">
                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
                              <Button asChild variant="surface" size="xxs" fontSize="xs" pl={2} pr={2}>
                                <a href={file?.url} target="_blank" rel="noopener noreferrer">Download</a>
                              </Button>
                            </Flex>
                          </>
                        )
                      })}
                    </Box>
                  </Collapsible.Content>
                </>
              )}
            </Collapsible.Context>
          </Collapsible.Root>
        )
        else if (thisWidget?.size === "small") return (
          <Flex key={index} direction="row" w="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3} borderRadius="lg" bg="gray.600">
            <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
              <Text truncate>{item?.volcano_name}</Text>
              <Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
            </Flex>
            <Flex w="100%" minW={0} justify="right">
              <Text
                truncate
                pl={2} pr={2}
                borderRadius="lg"
                bg="gray.800/50" color="gray.100"
                fontSize="sm" fontWeight="semibold"
              >
                {item?.report_time}
              </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.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;
}