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

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

import {
  FormView,
  FormLayout,
  TextField,
  YesNo,
  Next,
  Back,
} from "@/components";

import { Controller } from "@/controller";

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

export const schema: Schema<Values> = [
  {
    form: {
      values: () => ({
        working: [true, []],
      }),
      render: ({ values, ...rest }) => (
        <Controller step="working" {...rest}>
          <FormView
            defaultValues={values}
            resolver={zodResolver(
              z.object({
                working: z.boolean(),
              }),
            )}
          >
            <FormLayout
              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={<Next>Next</Next>}
            />
          </FormView>
        </Controller>
      ),
    },
  },
  {
    cond: {
      if: ({ working }) => working,
      then: [
        {
          form: {
            values: () => ({
              company: ["", []],
            }),
            render: ({ values, ...rest }) => (
              <Controller step="company" {...rest}>
                <FormView
                  defaultValues={values}
                  resolver={zodResolver(
                    z.object({
                      company: z.string(),
                    }),
                  )}
                >
                  <FormLayout
                    heading="At what company?"
                    description="We would like to know the name of the company"
                    fields={[
                      <TextField
                        key="company"
                        name="company"
                        label="Company"
                      />,
                    ]}
                    button={<Next>Next</Next>}
                    back={<Back />}
                  />
                </FormView>
              </Controller>
            ),
          },
        },
        {
          return: ({ working, company }) => ({
            working,
            company,
          }),
        },
      ],
      else: [
        {
          form: {
            values: () => ({
              searching: [false, []],
            }),
            render: ({ values, ...rest }) => (
              <Controller step="searching" {...rest}>
                <FormView
                  defaultValues={values}
                  resolver={zodResolver(
                    z.object({
                      searching: z.boolean(),
                    }),
                  )}
                >
                  <FormLayout
                    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={<Next>Next</Next>}
                    back={<Back />}
                  />
                </FormView>
              </Controller>
            ),
          },
        },
        {
          return: ({ working, searching }) => ({
            working,
            searching,
          }),
        },
      ],
    },
  },
];

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

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

import { useController } from "../controller";

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

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