import type { Schema, Cond, Form, Return } from "@formity/react";

import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

import {
  Step,
  Layout,
  TextField,
  YesNo,
  NextButton,
  BackButton,
} from "@/components";

import { MultiStep } from "@/multi-step";

export type Values = [
  Form<{ working: boolean }>,
  Cond<{
    then: [
      Form<{ company: string }>,
      Return<{
        working: true;
        company: string;
      }>
    ];
    else: [
      Form<{ searching: boolean }>,
      Return<{
        working: false;
        searching: boolean;
      }>
    ];
  }>
];

export const schema: Schema<Values> = [
  {
    form: {
      values: () => ({
        working: [true, []],
      }),
      render: ({ values, ...rest }) => (
        <MultiStep step="working" {...rest}>
          <Step
            defaultValues={values}
            resolver={zodResolver(
              z.object({
                working: z.boolean(),
              })
            )}
          >
            <Layout
              heading="Are you currently working?"
              description="We would like to know if you are working for a company"
              fields={[<YesNo key="working" name="working" label="Working" />]}
              button={<NextButton>Next</NextButton>}
            />
          </Step>
        </MultiStep>
      ),
    },
  },
  {
    cond: {
      if: ({ working }) => working,
      then: [
        {
          form: {
            values: () => ({
              company: ["", []],
            }),
            render: ({ values, ...rest }) => (
              <MultiStep step="company" {...rest}>
                <Step
                  defaultValues={values}
                  resolver={zodResolver(
                    z.object({
                      company: z.string().nonempty("Required"),
                    })
                  )}
                >
                  <Layout
                    heading="At what company?"
                    description="We would like to know the name of the company"
                    fields={[
                      <TextField
                        key="company"
                        name="company"
                        label="Company"
                      />,
                    ]}
                    button={<NextButton>Next</NextButton>}
                    back={<BackButton />}
                  />
                </Step>
              </MultiStep>
            ),
          },
        },
        {
          return: ({ company }) => ({
            working: true,
            company,
          }),
        },
      ],
      else: [
        {
          form: {
            values: () => ({
              searching: [false, []],
            }),
            render: ({ values, ...rest }) => (
              <MultiStep step="searching" {...rest}>
                <Step
                  defaultValues={values}
                  resolver={zodResolver(
                    z.object({
                      searching: z.boolean(),
                    })
                  )}
                >
                  <Layout
                    heading="Are you looking for a job?"
                    description="If you are looking for a job, we would like to know"
                    fields={[
                      <YesNo
                        key="searching"
                        name="searching"
                        label="Searching"
                      />,
                    ]}
                    button={<NextButton>Next</NextButton>}
                    back={<BackButton />}
                  />
                </Step>
              </MultiStep>
            ),
          },
        },
        {
          return: ({ searching }) => ({
            working: false,
            searching,
          }),
        },
      ],
    },
  },
];

import type { ReactElement } from "react";
import type { UseFormProps } from "react-hook-form";

import { FormProvider, useForm } from "react-hook-form";

import { useMultiStep } from "@/multi-step";

interface StepProps {
  defaultValues: UseFormProps["defaultValues"];
  resolver: UseFormProps["resolver"];
  children: ReactElement;
}

export default function Step({ defaultValues, resolver, children }: StepProps) {
  const form = useForm({ defaultValues, resolver });
  const { onNext } = useMultiStep();
  return (
    <form onSubmit={form.handleSubmit(onNext)} className="h-full">
      <FormProvider {...form}>{children}</FormProvider>
    </form>
  );
}