import { useLocalize } from "@wp2/helpers/dist/client";
import { Section } from "@wp2/ui/dist/section";
import { Input } from "@wp2/ui/dist/input";
import { Label } from "@wp2/ui/dist/label";
import { createBlock } from "../create";
import { tinaField } from "tinacms/dist/react";
import { Text } from "@wp2/ui/dist/text";
import { useContactForm } from "@wp2/helpers/dist/client";
import { Button } from "@wp2/ui/dist/button";
export const Contact = createBlock(({ data, global }) => {
    const localize = useLocalize();
    const { mutate, isLoading, isError, result } = useContactForm(global.config?.WEB3_API_KEY);
    const sendForm = (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        mutate(formData);
    };
    return (<Section id="contact" className="py-20 gap-10">
      <Text variant={data.title?.variant} data-tina-field={tinaField(data, "title")}>
        {localize(data.title?.text)}
      </Text>
      <form onSubmit={sendForm} className="flex flex-col gap-2">
        <div>
          <Label htmlFor="name" data-tina-field={tinaField(data, "name")}>
            {localize(data.name)}
          </Label>
          <Input type="text" name="name" variant={data.input}/>
        </div>
        <div>
          <Label htmlFor="email" data-tina-field={tinaField(data, "email")}>
            {localize(data.email)}
          </Label>
          <Input type="email" name="email" variant={data.input}/>
        </div>
        <div>
          <Label htmlFor="message" data-tina-field={tinaField(data, "message")}>
            {localize(data.message)}
          </Label>
          <Input type="text" name="message" variant={data.input}/>
        </div>
        <Button variant={data.submit?.variant} data-tina-field={tinaField(data, "submit")} type="submit">
          {localize(data.submit?.label)}
        </Button>
      </form>
      {isLoading && <p>Loading...</p>}
      {isError && <p className="text-destructive">Something went wrong. Please try again later.</p>}
      {result && <p>{result}</p>}
    </Section>);
});