MIF_E31221222/sigap-website/app/(auth-pages)/_components/auth/contact-us.tsx

"use client";

import * as React from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/app/_components/ui/card";
import { Input } from "@/app/_components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/app/_components/ui/select";
import { Textarea } from "../../../_components/ui/textarea";
import { SubmitButton } from "../../../_components/submit-button";
import Link from "next/link";
import { TValidator } from "@/utils/validator";
import { FormField } from "../../../_components/form-field";
import { typeMessage } from "@/src/entities/models/contact-us.model";
import { Form } from "../../../_components/ui/form";
import { useContactForm } from "@/hooks/use-contact-us-form";

export function ContactUsForm() {
  const {
    formData,
    errors,
    isSubmitting,
    setFormData,
    handleChange,
    handleSelectChange,
    handleSubmit,
  } = useContactForm();

  return (
    <Card className="w-[500px] bg-[#171717] border-none text-white">
      <CardHeader>
        <CardTitle className="text-3xl font-bold">Contact Us</CardTitle>
        <CardDescription className="text-gray-400">
          Fill in the form below to contact the admin
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-2">
          <FormField
            label="Name"
            input={
              <Input
                id="name"
                placeholder="John doe"
                className={`bg-[#1C1C1C] border-gray-800 text-white placeholder:text-gray-500 focus:border-emerald-600 focus:ring-emerald-600 ${
                  errors.name ? "border-red-500" : ""
                }`}
                value={formData.name}
                onChange={handleChange}
                disabled={isSubmitting}
              />
            }
            error={errors.name}
          />
          <FormField
            label="Email"
            input={
              <Input
                id="email"
                placeholder="example@gmail.com"
                className={`bg-[#1C1C1C] border-gray-800 text-white placeholder:text-gray-500 focus:border-emerald-600 focus:ring-emerald-600 ${
                  errors.email ? "border-red-500" : ""
                }`}
                value={formData.email}
                onChange={handleChange}
                disabled={isSubmitting}
              />
            }
            error={errors.email}
          />
          <FormField
            label="Phone"
            input={
              <Input
                id="phone"
                placeholder="08123456789"
                className={`bg-[#1C1C1C] border-gray-800 text-white placeholder:text-gray-500 focus:border-emerald-600 focus:ring-emerald-600 ${
                  errors.phone ? "border-red-500" : ""
                }`}
                value={formData.phone}
                onChange={handleChange}
                disabled={isSubmitting}
              />
            }
            error={errors.phone}
          />
          <FormField
            label="Type message"
            input={
              <Select
                value={formData.typeMessage}
                onValueChange={handleSelectChange}
                disabled={isSubmitting}
              >
                <SelectTrigger
                  id="typemessage"
                  className={`bg-[#1C1C1C] border-gray-800 text-white focus:border-emerald-600 focus:ring-emerald-600 ${
                    errors.typeMessage ? "border-red-500" : ""
                  }`}
                >
                  <SelectValue placeholder="Select" />
                </SelectTrigger>
                <SelectContent className="bg-[#1C1C1C] border-gray-800 text-white">
                  {typeMessage.map((message) => (
                    <SelectItem
                      key={message.value}
                      value={message.value}
                      className="focus:bg-emerald-600 focus:text-white"
                    >
                      {message.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            }
            error={errors.typeMessage}
          />
          <FormField
            label="Message"
            input={
              <Textarea
                id="message"
                placeholder="Your message here..."
                className={`resize-none h-24 bg-[#1C1C1C] border-gray-800 text-white placeholder:text-gray-500 focus:border-emerald-600 focus:ring-emerald-600 ${
                  errors.message ? "border-red-500" : ""
                }`}
                value={formData.message}
                onChange={handleChange}
                disabled={isSubmitting}
              />
            }
            error={errors.message}
          />
          <CardFooter className="flex flex-col items-center space-y-4 px-0">
            <SubmitButton
              className="w-full bg-emerald-600 hover:bg-emerald-700 text-white"
              disabled={isSubmitting}
              pendingText="Sending..."
            >
              Send
            </SubmitButton>
            <div className="text-center text-lg space-x-2">
              <span className="text-gray-400">Already have an account?</span>
              <Link
                href="/sign-in"
                className="text-white hover:text-emerald-500"
              >
                Login
              </Link>
            </div>
          </CardFooter>
        </form>
      </CardContent>
    </Card>
  );
}