Web-Frontend/client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx

import Widget from "./Widget";
import { Stack, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import { useState } from "react";
import { LuAsterisk } from "react-icons/lu";

export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
  const { register, handleSubmit, reset, formState: {errors} } = useForm();
  const onSubmit = (data) => {
    console.log("data: ", data);
    if (data.volcanoname === '') {
      return null;
    }
    setIsSubmit(true);
    reset();
  }
  const [isSubmit, setIsSubmit] = useState(false);

  // Prop Forwarding
  const widgetProps = { id, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit }
  return (
    <Widget title="Alert Level" {...widgetProps}>
      {!isSubmit ? (
        // DISPLAYING INPUT FIElDS AND LABELS
        <Box 
          as="form" 
          onSubmit={handleSubmit(onSubmit)}
          width="100%"
          height="100%"
          pt={1}
          pl={3}
          pr={3}
          display="flex"
          flexDir="column"
          gap="10"
        >
          <Field.Root orientation="horizontal">
            <Stack direction="column" gap="3" width="100%">
              <Stack direction="row" width="100%">
                <Field.Label whiteSpace="nowrap" fontWeight="bold">Country Name</Field.Label>
                {/* place select drop down menu here instead of asking for input */}
                <Input {...register("countryname")} placeholder="Enter country name"/>
              </Stack>
              <Flex position="relative" dir="column" gap="0.5" width="100%">
                <Stack direction="row" width="100%">
                  <Field.Label display="flex" whiteSpace="nowrap" fontWeight="bold">
                    Volcano Name <LuAsterisk color="tomato" />
                  </Field.Label>
                  <Input 
                    border={errors.volcanoname ? "2px solid" : undefined}
                    borderColor={errors.volcanoname ? "tomato" : undefined} 
                    {...register("volcanoname", { required: 'This field is required.' })} 
                    placeholder="Enter volcano name"/>
                </Stack>
                {errors.volcanoname && <Box cursor="default" userSelect="none" position="absolute" top="40px" left="8.5rem" style={{ color: 'tomato' }}>{errors.volcanoname.message}</Box>}
              </Flex>
            </Stack>
          </Field.Root>
          <Button type="submit" size="sm">Submit</Button>
        </Box>
      ):(
        // DISPLAYING ALERT LEVEL DATA
        <Box p={1} mt={1} ml="auto" mr="auto" width="200px">
          <Box
            bg="bg" 
            shadow="md" 
            borderRadius="md"
            p={8}
            width="200px"
            height="10px"
            textAlign="center"
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <Text fontsize="2xl" fontWeight="bold" color="gray.700">Alert Level Data Coming Soon.</Text>
          </Box>
        </Box>
      )}
    </Widget>
  );
}