Complex

import React from "react";
import {
  Input,
  Button,
  CheckboxButton,
  RadioButton,
  FileUpload,
  ImagePicker,
  Textarea,
  Typography,
} from "tawuniya";
import { Controller, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";

import styles from "../styles.module.css";

const schema = Yup.object().shape({
  name: Yup.string().required("Name is required").min(1, "Name is required"),
  email: Yup.string().email("Email is required").required("Email is required"),
  interests: Yup.array()
    .of(Yup.string())
    .min(1, "Please select at least one interest")
    .required("Please select at least one interest"),
  accountType: Yup.string()
    .required("Please select an account type")
    .min(1, "Please select an account type"),
  documents: Yup.array()
    .of(
      Yup.object().shape({
        id: Yup.string().required(),
        file: Yup.string().required(),
        fileName: Yup.string().required(),
        fileType: Yup.string().required(),
        size: Yup.number().required(),
      })
    )
    .min(1, "Please select a file")
    .required("Please select a file"),
  profilePictures: Yup.array()
    .of(
      Yup.object().shape({
        id: Yup.string().required(),
        file: Yup.string().required(),
        fileName: Yup.string().required(),
        fileType: Yup.string().required(),
        size: Yup.number().required(),
      })
    )
    .min(1, "Please select a image")
    .required("Please select a image"),
  bio: Yup.string().required("Please enter a bio").min(1, "Please enter a bio"),
  password: Yup.string()
    .required("Password is required")
    .min(1, "Password is required"),
});

type FormType = Yup.InferType<typeof schema>;

const ComplexForm = () => {
  const {
    register,
    handleSubmit,
    control,
    formState: { errors },
  } = useForm<FormType>({
    resolver: yupResolver(schema as Yup.ObjectSchema<FormType>),
    defaultValues: {
      interests: [],
      documents: [],
    },
    mode: "onChange",
  });

  const onSubmit = (data: FormType) => {
    alert(JSON.stringify(data, null, 2));
  };

  return (
    <div className={styles.container}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className={styles.grid}>
          <Input
            name="name"
            label="Name"
            register={register}
            size="lg"
            error={errors.name?.message}
          />
          <Input
            type="email"
            name="email"
            label="Email"
            register={register}
            size="lg"
            error={errors.email?.message}
          />
        </div>
        <Input
          type="password"
          name="password"
          label="Password"
          register={register}
          size="lg"
          error={errors.password?.message}
        />
        <div className={styles.flexCol}>
          <Typography
            as="label"
            size="md"
            weight="medium"
            color="muted_foreground"
          >
            Interests
          </Typography>
          <CheckboxButton
            items={[
              { id: "programming", label: "Programming" },
              { id: "design", label: "Design" },
              { id: "marketing", label: "Marketing" },
            ]}
            multiple
            form={{
              controller: Controller,
              control,
              name: "interests",
            }}
            error={errors.interests?.message}
          />
        </div>
        <div className={styles.flexCol}>
          <Typography
            as="label"
            size="md"
            weight="medium"
            color="muted_foreground"
          >
            Account Type
          </Typography>
          <RadioButton
            options={[
              {
                value: "free",
                label: "Free",
              },
              {
                value: "premium",
                label: "Premium",
              },
              {
                value: "enterprise",
                label: "Enterprise",
              },
            ]}
            form={{
              controller: Controller,
              control,
              name: "accountType",
            }}
            error={errors.accountType?.message}
          />
        </div>
        <div className={styles.flexCol}>
          <Typography
            as="label"
            size="md"
            weight="medium"
            color="muted_foreground"
          >
            CV
          </Typography>
          <FileUpload
            id="files"
            label="Upload CV File be click to upload."
            form={{
              controller: Controller,
              control,
              name: "documents",
            }}
            error={errors.documents?.message}
          />
        </div>
        <div className={styles.flexCol}>
          <Typography
            as="label"
            size="md"
            weight="medium"
            color="muted_foreground"
          >
            Profile Pictures
          </Typography>
          <ImagePicker
            id="images"
            form={{
              controller: Controller,
              control,
              name: "profilePictures",
            }}
            error={errors.profilePictures?.message}
          />
        </div>
        <Textarea
          name="bio"
          placeholder="Enter your bio"
          register={register}
          error={errors.bio?.message}
        />
        <Button type="submit" size="lg">
          Submit
        </Button>
      </form>
    </div>
  );
};

export default ComplexForm;