Reactive-Resume/src/dialogs/resume/sections/education.tsx

import type z from "zod";

import { zodResolver } from "@hookform/resolvers/zod";
import { Trans } from "@lingui/react/macro";
import { PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react";
import { useForm, useFormContext } from "react-hook-form";

import type { DialogProps } from "@/dialogs/store";

import { RichInput } from "@/components/input/rich-input";
import { URLInput } from "@/components/input/url-input";
import { useResumeStore } from "@/components/resume/store/resume";
import { Button } from "@/components/ui/button";
import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { useDialogStore } from "@/dialogs/store";
import { useFormBlocker } from "@/hooks/use-form-blocker";
import { educationItemSchema } from "@/schema/resume/data";
import { createSectionItem, updateSectionItem } from "@/utils/resume/section-actions";
import { generateId } from "@/utils/string";

const formSchema = educationItemSchema;

type FormValues = z.infer<typeof formSchema>;

export function CreateEducationDialog({ data }: DialogProps<"resume.sections.education.create">) {
  const closeDialog = useDialogStore((state) => state.closeDialog);
  const updateResumeData = useResumeStore((state) => state.updateResumeData);

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      id: generateId(),
      hidden: data?.item?.hidden ?? false,
      options: data?.item?.options ?? { showLinkInTitle: false },
      school: data?.item?.school ?? "",
      degree: data?.item?.degree ?? "",
      area: data?.item?.area ?? "",
      grade: data?.item?.grade ?? "",
      location: data?.item?.location ?? "",
      period: data?.item?.period ?? "",
      website: data?.item?.website ?? { url: "", label: "" },
      description: data?.item?.description ?? "",
    },
  });

  const onSubmit = (formData: FormValues) => {
    updateResumeData((draft) => {
      createSectionItem(draft, "education", formData, data?.customSectionId);
    });
    closeDialog();
  };

  const { blockEvents, requestClose } = useFormBlocker(form);

  return (
    <DialogContent {...blockEvents}>
      <DialogHeader>
        <DialogTitle className="flex items-center gap-x-2">
          <PlusIcon />
          <Trans>Create a new education</Trans>
        </DialogTitle>
        <DialogDescription />
      </DialogHeader>

      <Form {...form}>
        <form className="grid gap-4 sm:grid-cols-2" onSubmit={form.handleSubmit(onSubmit)}>
          <EducationForm />

          <DialogFooter className="sm:col-span-full">
            <Button variant="ghost" onClick={requestClose}>
              <Trans>Cancel</Trans>
            </Button>

            <Button type="submit" disabled={form.formState.isSubmitting}>
              <Trans>Create</Trans>
            </Button>
          </DialogFooter>
        </form>
      </Form>
    </DialogContent>
  );
}

export function UpdateEducationDialog({ data }: DialogProps<"resume.sections.education.update">) {
  const closeDialog = useDialogStore((state) => state.closeDialog);
  const updateResumeData = useResumeStore((state) => state.updateResumeData);

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      id: data.item.id,
      hidden: data.item.hidden,
      options: data.item.options ?? { showLinkInTitle: false },
      school: data.item.school,
      degree: data.item.degree,
      area: data.item.area,
      grade: data.item.grade,
      location: data.item.location,
      period: data.item.period,
      website: data.item.website,
      description: data.item.description,
    },
  });

  const onSubmit = (formData: FormValues) => {
    updateResumeData((draft) => {
      updateSectionItem(draft, "education", formData, data?.customSectionId);
    });
    closeDialog();
  };

  const { blockEvents, requestClose } = useFormBlocker(form);

  return (
    <DialogContent {...blockEvents}>
      <DialogHeader>
        <DialogTitle className="flex items-center gap-x-2">
          <PencilSimpleLineIcon />
          <Trans>Update an existing education</Trans>
        </DialogTitle>
        <DialogDescription />
      </DialogHeader>

      <Form {...form}>
        <form className="grid gap-4 sm:grid-cols-2" onSubmit={form.handleSubmit(onSubmit)}>
          <EducationForm />

          <DialogFooter className="sm:col-span-full">
            <Button variant="ghost" onClick={requestClose}>
              <Trans>Cancel</Trans>
            </Button>

            <Button type="submit" disabled={form.formState.isSubmitting}>
              <Trans>Save Changes</Trans>
            </Button>
          </DialogFooter>
        </form>
      </Form>
    </DialogContent>
  );
}

function EducationForm() {
  const form = useFormContext<FormValues>();

  return (
    <>
      <FormField
        control={form.control}
        name="school"
        render={({ field }) => (
          <FormItem>
            <FormLabel>
              <Trans>School</Trans>
            </FormLabel>
            <FormControl render={<Input {...field} />} />
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        control={form.control}
        name="degree"
        render={({ field }) => (
          <FormItem>
            <FormLabel>
              <Trans>Degree</Trans>
            </FormLabel>
            <FormControl render={<Input {...field} />} />
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        control={form.control}
        name="area"
        render={({ field }) => (
          <FormItem>
            <FormLabel>
              <Trans>Area of Study</Trans>
            </FormLabel>
            <FormControl render={<Input {...field} />} />
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        control={form.control}
        name="grade"
        render={({ field }) => (
          <FormItem>
            <FormLabel>
              <Trans>Grade</Trans>
            </FormLabel>
            <FormControl render={<Input {...field} />} />
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        control={form.control}
        name="location"
        render={({ field }) => (
          <FormItem>
            <FormLabel>
              <Trans>Location</Trans>
            </FormLabel>
            <FormControl render={<Input {...field} />} />
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        control={form.control}
        name="period"
        render={({ field }) => (
          <FormItem>
            <FormLabel>
              <Trans>Period</Trans>
            </FormLabel>
            <FormControl render={<Input {...field} />} />
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        control={form.control}
        name="website"
        render={({ field }) => (
          <FormItem className="sm:col-span-full">
            <FormLabel>
              <Trans>Website</Trans>
            </FormLabel>
            <URLInput
              {...field}
              value={field.value}
              onChange={field.onChange}
              hideLabelButton={form.watch("options.showLinkInTitle")}
            />
            <FormMessage />
          </FormItem>
        )}
      />

      <FormField
        control={form.control}
        name="options.showLinkInTitle"
        render={({ field }) => (
          <FormItem className="flex items-center gap-x-2 sm:col-span-full">
            <FormControl render={<Switch checked={field.value} onCheckedChange={field.onChange} />} />
            <FormLabel className="mt-0!">
              <Trans>Show link in title</Trans>
            </FormLabel>
          </FormItem>
        )}
      />

      <FormField
        control={form.control}
        name="description"
        render={({ field }) => (
          <FormItem className="sm:col-span-full">
            <FormLabel>
              <Trans>Description</Trans>
            </FormLabel>
            <FormControl render={<RichInput {...field} value={field.value} onChange={field.onChange} />} />
            <FormMessage />
          </FormItem>
        )}
      />
    </>
  );
}