'use client'

import { ChangeEvent, useRef, useState } from "react";
import { CheckboxInput, Input, Submit } from "./form";
import { FloatingLabel } from "../floating-label";

export default function ContactForm() {
  const [anon, setAnon] = useState(false);
  const formRef = useRef<HTMLFormElement | null>(null);
  const [status, setStatus] = useState<'success' | 'loading' | 'failed' | 'idle'>('idle');
  const [errorMsg, setErrorMsg] = useState("");

  const statusMsg = {
    success: 'Sended!',
    loading: 'Sending...',
    failed: 'Failed :(',
    idle: 'Send!'
  }

  const send = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setStatus('idle');
    setErrorMsg('');

    if (status == 'loading' || !formRef.current) return;
    
    const formData = new FormData(formRef.current);
    
    const data = {
      anon,
      name: formData.get('name')?.toString(),
      email: formData.get('email')?.toString(),
      message: formData.get('message')!.toString()
    }
    
    if ((data.name && data.email) && (data.name.length < 1 || data.email.length < 1) && !data.anon) {
      setErrorMsg("Name and email are required. If you prefer not to provide them, check the box to send anonymously.");
      return;
    }
    
    if (data.message.length < 1) {
      setErrorMsg("What do you want to tell me???");
      return;
    }

    setStatus('loading');
    //process

    await new Promise(res => setTimeout(res, 2000));
    setStatus('success');
  }

  return (
    <form action="POST" className="space-y-4" ref={formRef} onSubmit={send}>
      <FloatingLabel placeholder="Leave an anonymous message, but I won't answer it">
        <CheckboxInput
          name="anon"
          placeholder="Send anonymously🤫"
          onChange={setAnon}
        />
      </FloatingLabel>
      {!anon && <>
        <label className="block" htmlFor="contact-name">
          <div className="mb-2">Name</div>
          <Input
            id="contact-name"
            className="w-full"
            name="name"
            type="text"
            placeholder="Any name you want me to know"
          />
        </label>
        <label className="block" htmlFor="contact-email">
          <div className="mb-2">Email</div>
          <Input
            id="contact-email"
            className="w-full"
            name="email"
            type="email"
          />
        </label>
      </>}
      <label className="block" htmlFor="contact-msg">
        <div className="mb-2">Message</div>
        <textarea
          name="message"
          id="contact-msg"
          className="max-h-96 h-32 w-full p-3 bg-background border border-primary"
          placeholder="Tell me something cool, or ask question"
        />
      </label>
      <div className="text-primary">{errorMsg}</div>
      <Submit className="w-full">{statusMsg[status]}</Submit>
    </form>
  );
}