"use client";

import { useRef } from "react";
import * as z from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Container } from "@/components/container/components/container";
import { IconList } from "@/components/icon-list/components/icon-list";
import {
  FacebookIcon,
  GithubIcon,
  InstagramIcon,
  LinkedInIcon,
  XIcon,
} from "@/components/icons";
import { Mail, Phone } from "lucide-react";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { cn } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";

export const iconLinks = [
  {
    href: "https://x.com/focus",
    label: "Follow on X",
    Icon: XIcon,
    className: "fill-muted-foreground",
  },
  {
    href: "https://github.com/focus",
    label: "Follow on GitHub",
    Icon: GithubIcon,
    className: "fill-muted-foreground",
  },
  {
    href: "https://instagram.com/focus",
    label: "Follow on Instagram",
    Icon: InstagramIcon,
    className: "fill-muted-foreground",
  },
  {
    href: "https://linkedin.com/focus",
    label: "Follow on LinkedIn",
    Icon: LinkedInIcon,
    className: "fill-muted-foreground",
  },
  {
    href: "https://facebook.com/focus",
    label: "Follow on Facebook",
    Icon: FacebookIcon,
    className: "fill-muted-foreground",
  },
];

export const contactLinks = [
  {
    href: "tel:+447989476903",
    label: "+447989476903",
    Icon: Phone,
    className: "stroke-muted-foreground",
  },
  {
    href: "mailto:info@yourdomain.com",
    label: "info@yourdomain.com",
    Icon: Mail,
    className: "stroke-muted-foreground",
  },
];

const formSchema = z.object({
  name: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
  email: z.string().email({
    message: "Enter a valid email.",
  }),
  subject: z.string().min(10, {
    message: "Subject needs to be at least 10 characters long.",
  }),
  message: z.string().min(30, {
    message: "Message needs to be at least 30 characters long.",
  }),
});

function ContactForm({ className }: { className?: string }) {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      email: "",
      subject: "",
      message: "",
    },
  });

  const formRef = useRef<any>(null);
  const onSubmit = () => console.log("submit");

  return (
    <Form {...form}>
      <form
        ref={formRef}
        onSubmit={form.handleSubmit(onSubmit)}
        className={cn(
          "space-y-8 border bg-card shadow rounded-lg p-6 md:p-10",
          className,
        )}
      >
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Your name</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="subject"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Subject</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="message"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Message</FormLabel>
              <FormControl>
                <Textarea {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit" className="max-[767px]:w-full">
          Send
        </Button>
      </form>
    </Form>
  );
}

const title = "Get in Touch";
const description =
  "I’m always on the lookout for new opportunities and to collaborate with like-minded people, if you have a question about how I can help you or want to hire me, get in touch using the contact form, or via social media.";

export function Page() {
  return (
    <Container
      className="grid grid-cols-12 gap-4 gap-y-8 content-start mx-auto max-w-7xl"
      wrapperClassName="py-32"
    >
      <div className="grid gap-6 md:gap-8 lg:pb-8 col-span-12">
        <h1 className="text-3xl md:text-5xl md:leading-[3.5rem] font-display tracking-tight text-foreground -mb-2 text-balance max-w-[30ch]">
          {title}
        </h1>
        <p className="text-base leading-7 md:text-lg md:leading-8 text-muted-foreground max-w-[60ch]">
          {description}
        </p>
      </div>
      <ContactForm className="col-span-12 md:col-span-7 relative" />
      <div className="grid gap-5 col-span-12 md:col-span-5 md:col-start-9 content-start">
        <IconList links={contactLinks} />
        <hr />
        <IconList links={iconLinks} />
      </div>
    </Container>
  );
}
Contact blocks
