sarlink-portal/components/auth/signup-form.tsx

"use client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import Link from "next/link";

import { signup } from "@/actions/auth-actions";
import { cn } from "@/lib/utils";
import { Loader } from "lucide-react";
import { useActionState } from "react";
import { useSearchParams } from "next/navigation";
import { Atoll, Island, Prisma } from "@prisma/client";
import * as React from "react"

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"


type AtollWithIslands = Prisma.AtollGetPayload<{
  include: {
    islands: true;
  }
}>

export default function SignUpForm({ atolls }: { atolls: AtollWithIslands[] }) {
  const [atoll, setAtoll] = React.useState<AtollWithIslands>()
  const [island, setIsland] = React.useState<string>()



  const [actionState, action, isPending] = useActionState(signup, {
    message: "",
  });
  const params = useSearchParams();
  const phoneNumberFromUrl = params.get("phone_number");
  const NUMBER_WITHOUT_DASH = phoneNumberFromUrl?.split("-").join("")


  return (
    <form
      action={action}
      className="max-w-xs mt-4 w-full bg-white dark:bg-transparent dark:border-2 shadow rounded-lg mx-auto"
    >
      <div className="py-2 px-4 my-2 space-y-2">
        <div>
          <label htmlFor="name" className="text-sm">Name</label>

          <Input
            className={cn(
              'text-base',
              actionState.errors?.fieldErrors.name && 'border-2 border-red-500',
            )}
            name="name"
            type="text"
            defaultValue={(actionState.payload?.get("name") || "") as string}
            placeholder="Full Name"
          />
          {actionState.errors?.fieldErrors.name && (
            <span className="text-sm inline-block text-red-500">
              {actionState.errors?.fieldErrors.name}
            </span>
          )}
        </div>
        <div>
          <label htmlFor="id_card" className="text-sm">ID Card</label>
          <Input
            name="id_card"
            type="text"
            maxLength={7}
            defaultValue={(actionState.payload?.get("id_card") || "") as string}
            className={cn(
              'text-base',
              actionState.errors?.fieldErrors?.id_card && 'border-2 border-red-500',
            )}
            placeholder="ID Card"
          />
          {actionState?.errors?.fieldErrors?.id_card?.[0] && (
            <span className="text-sm inline-block text-red-500">
              {actionState.errors.fieldErrors.id_card[0]}
            </span>
          )}
          {actionState.db_error === "id_card" && (
            <span className="text-sm inline-block text-red-500">
              {actionState.message}
            </span>
          )}
        </div>
        <div>
          {/* <label htmlFor="island_name" className="text-sm">Island Name</label>
          <Input
            name="island_name"
            type="text"
            defaultValue={"F.Dharaboondhoo"}
            className={cn(
              'text-base cursor-not-allowed',
              actionState.errors?.fieldErrors?.island_name && 'border-2 border-red-500',
            )}
            readOnly
          />
          {actionState?.errors?.fieldErrors.island_name && (
            <span className="text-sm inline-block text-red-500">
              {actionState?.errors?.fieldErrors.island_name}
            </span>
          )} */}

          <div>
            <label htmlFor="atoll" className="text-sm">Atoll</label>
            <Select onValueChange={(v) => {
              setAtoll(atolls.find((atoll) => atoll.id === v))
              setIsland("")
            }} name="atoll_id" value={atoll?.id}>
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select atoll" />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectLabel>Atolls</SelectLabel>
                  {atolls.map((atoll) => (
                    <SelectItem key={atoll.id} value={atoll.id}>
                      {atoll.name}
                    </SelectItem>
                  ))}
                </SelectGroup>
              </SelectContent>
              {actionState.errors?.fieldErrors?.atoll_id && (
                <span className="text-sm inline-block text-red-500">
                  {actionState.errors?.fieldErrors?.atoll_id}
                </span>
              )}
            </Select>
          </div>
          <div>
            <label htmlFor="island" className="text-sm">Island</label>
            <Select
              name="island_id">
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select island" />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectLabel>Islands</SelectLabel>
                  {atoll?.islands.map((island) => (
                    <SelectItem key={island.id} value={island.id}>
                      {island.name}
                    </SelectItem>
                  ))}
                </SelectGroup>
              </SelectContent>
              {actionState.errors?.fieldErrors?.island_id && (
                <span className="text-sm inline-block text-red-500">
                  {actionState.errors?.fieldErrors?.island_id}
                </span>
              )}
            </Select>
          </div>
        </div>

        <div>
          <label htmlFor="house_name" className="text-sm">House Name</label>
          <Input
            className={cn(
              'text-base',
              actionState.errors?.fieldErrors?.house_name && 'border-2 border-red-500',
            )}
            name="house_name"
            defaultValue={(actionState.payload?.get("house_name") || "") as string}
            type="text"
            placeholder="House Name"
          />
          {actionState.errors?.fieldErrors?.house_name && (
            <span className="text-sm inline-block text-red-500">
              {actionState.errors?.fieldErrors?.house_name}
            </span>
          )}
        </div>

        <div>
          <label htmlFor="dob" className="text-sm">Date of Birth</label>
          <Input
            className={cn(
              'text-base',
              actionState.errors?.fieldErrors?.dob && 'border-2 border-red-500',
            )}
            name="dob"
            defaultValue={(actionState.payload?.get("dob") || "") as string}
            type="date"
            placeholder="Date of birth"
          />
          {actionState.errors?.fieldErrors?.dob && (
            <span className="text-sm inline-block text-red-500">
              {actionState.errors?.fieldErrors?.dob}
            </span>
          )}
        </div>

        <div>
          <label htmlFor="phone_number" className="text-sm">Phone Number</label>
          <Input
            id="phone-number"
            name="phone_number"
            maxLength={8}
            className={cn(!phoneNumberFromUrl && actionState.errors?.fieldErrors?.phone_number && "border-2 border-red-500 rounded-md",)}
            defaultValue={NUMBER_WITHOUT_DASH ?? ""}
            readOnly={Boolean(phoneNumberFromUrl)}
            placeholder={phoneNumberFromUrl ?? "Phone number"}
          />
        </div>
        {actionState?.errors?.fieldErrors?.phone_number?.[0] && (
          <span className="text-sm inline-block text-red-500">
            {actionState.errors.fieldErrors.phone_number[0]}
          </span>
        )}
        <Button disabled={isPending} className="mt-4 w-full" type="submit">
          {isPending ? <Loader className="animate-spin" /> : "Submit"}
        </Button>
      </div>

      <div className="mb-4 text-center text-sm">
        Already have an account?{" "}
        <Link href="login" className="underline">
          login
        </Link>
      </div>

    </form>
  );
}