import Widget from "./Widget.jsx";
import { Fieldset, NativeSelect, For, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import { useState } from "react";
import { Asterisk } from 'lucide-react';

export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
  const { register, handleSubmit, reset, formState: {errors} } = useForm();
  const [isSubmit, setIsSubmit] = useState(false);

  const onSubmit = (data) => {
    setIsSubmit(true);
    reset();
  }

  // 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%"
          p={3}
          display="flex"
          flexDir="column"
        >
          <Fieldset.Root size="md" maxW="md">
            <Fieldset.Content>
              <Field.Root>
                <Field.Label fontWeight="semibold">Volcano</Field.Label>
                <Input name="volcanoname" />
              </Field.Root>

              <Field.Root>
                <Field.Label fontWeight="semibold">Country</Field.Label>
                <NativeSelect.Root>
                  <NativeSelect.Field name="country">
                    <For each={["United Kingdom", "Canada", "United States"]}>
                      {(item) => (
                        <option key={item} value={item}>
                          {item}
                        </option>
                      )}
                    </For>
                  </NativeSelect.Field>
                  <NativeSelect.Indicator />
                </NativeSelect.Root>
              </Field.Root>
            </Fieldset.Content>

            <Button type="submit" size="sm">Submit</Button>
          </Fieldset.Root>
        </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>
  );
}