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

export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
    setIsSubmit(true);
  }
  const [isSubmit, setIsSubmit] = useState(false);

  // Prop Forwarding
  const widgetProps = { id, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit }
  return (
    <Widget title="Alert Level" {...widgetProps}>
      {!isSubmit ? (
        <Box 
          as="form" 
          onSubmit={handleSubmit(onSubmit)}
          width="100%"
          height="100%"
          pt={1}
          pl={3}
          pr={3}
          display="flex"
          flexDir="column"
          gap="3"
        >
          <Field.Root orientation="horizontal" >
            <Stack direction="column" gap="3" width="100%">
              <Stack direction="row" display="flex" flexShrink={1} spacing={4} align="center" width="100%">
                <Field.Label whiteSpace="nowrap" fontWeight="bold">Country Name</Field.Label>
                <Input {...register("countryname")} placeholder="Enter country name"/>
              </Stack>
              <Stack direction="row" display="flex" spacing={4} align="center" width="100%">
                <Field.Label display="flex" whiteSpace="nowrap" fontWeight="bold">Volcano Name</Field.Label>
                <Input {...register("countryname")} placeholder="Enter volcano name"/>
              </Stack>
            </Stack>
          </Field.Root>
          <Button type="submit" size="sm" onClick={() => setIsSubmit(true)}>Submit</Button>
        </Box>
      ):(
        <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>
  );
}