import { Flex, Grid, Textarea, TextInput } from "@mantine/core";
import { type UseFormReturnType } from "@mantine/form";

import StepContentWrapper from "../stepContentWrapper";
import StepperNavigation from "../stepperNavigation";
import type { NotificationFormType } from "./types";

const NotificationForm: React.FC<{
  activeStep: number;
  setActiveStep: React.Dispatch<React.SetStateAction<number>>;
  form: UseFormReturnType<
    NotificationFormType,
    (values: NotificationFormType) => NotificationFormType
  >;
}> = ({ activeStep, setActiveStep, form }) => {
  const handleSubmit = (data: NotificationFormType) => {
    setActiveStep((current) => (current < 4 ? current + 1 : current));
  };

  const clearTargetForm = () => {
    form.reset();
  };

  return (
    <StepContentWrapper
      title="Step 1 - Notification"
      onClearClick={clearTargetForm}
    >

      <form
        onSubmit={form.onSubmit(handleSubmit)}
        style={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          gap: "32px"
        }}
      >
        <Grid gutter={"lg"}>
          <Grid.Col span={12}>
            <Grid>
              <Grid.Col span={12}>
                <TextInput
                  fz={14}
                  labelProps={{ fz: 13, mb: 5 }}
                  label="Campaign Name"
                  description="Internal name for tracking (not sent to users)"
                  radius={4}
                  key={form.key("name")}
                  {...form.getInputProps("name")}
                />
              </Grid.Col>
              <Grid.Col span={12}>
                <TextInput
                  fz={14}
                  labelProps={{ fz: 13, mb: 5 }}
                  label="Notification Title"
                  radius={4}
                  key={form.key("title")}
                  {...form.getInputProps("title")}
                />
              </Grid.Col>

              <Grid.Col span={12}>
                <Textarea
                  fz={14}
                  labelProps={{ fz: 13, mb: 5 }}
                  label="Notification Text"
                  radius={4}
                  key={form.key("text")}
                  {...form.getInputProps("text")}
                />
              </Grid.Col>
              <Grid.Col span={12}>
                <TextInput
                  fz={14}
                  labelProps={{ fz: 13, mb: 5 }}
                  label="Notification Image URL (optional)"
                  key={form.key("image")}
                  {...form.getInputProps("image")}
                />
              </Grid.Col>
            </Grid>
          </Grid.Col>
        </Grid>

        <Flex justify={"end"}>
          <StepperNavigation
            activeStep={activeStep}
            setActiveStep={setActiveStep}
            notificationData={form.values}
          />
        </Flex>
      </form>
    </StepContentWrapper>
  );
};

export default NotificationForm;