"use client";
import { tinaField } from "tinacms/dist/react";
import { Section } from "@wp2/ui/dist/section";
import { Image } from "@wp2/ui/dist/image";
import { useLocalize } from "@wp2/helpers/dist/client";
import { createBlock } from "../create";
import { useContactForm } from "@wp2/helpers/dist/client";
import { Label } from "@wp2/ui/dist/label";
import { Input } from "@wp2/ui/dist/input";
import { Button } from "@wp2/ui/dist/button";
import { Mail, MapPin, Phone } from "lucide-react";
import { SocialIcon } from "../header/social-icon";
import { LangSelector } from "../header/lang-selector";
import { Text } from "@wp2/ui/dist/text";
const Contact = createBlock(({ data }) => {
    const localize = useLocalize();
    const { mutate, isLoading, isError, result } = useContactForm();
    const sendForm = (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        mutate(formData);
    };
    return (<form onSubmit={sendForm} className="flex flex-col gap-2 w-full">
      <div>
        <Label htmlFor="name" data-tina-field={tinaField(data, "name")}>
          {localize(data.name)}
        </Label>
        <Input type="text" name="name" variant={data.inputVariant}/>
      </div>
      <div>
        <Label htmlFor="email" data-tina-field={tinaField(data, "email")}>
          {localize(data.email)}
        </Label>
        <Input type="email" name="email" variant={data.inputVariant}/>
      </div>
      <div>
        <Label htmlFor="phone" data-tina-field={tinaField(data, "phone")}>
          {localize(data.phone)}
        </Label>
        <Input type="number" name="phone" variant={data.inputVariant}/>
      </div>
      <div>
        <Label htmlFor="message" data-tina-field={tinaField(data, "message")}>
          {localize(data.message)}
        </Label>
        <Input type="textarea" name="message" variant={data.inputVariant}/>
      </div>
      <Button variant={data.submit?.variant} data-tina-field={tinaField(data, "submit")} type="submit">
        {localize(data.submit?.label)}
      </Button>
      {isLoading && <p>Loading...</p>}
      {isError && <p className="text-destructive">Something went wrong. Please try again later.</p>}
      {result && <p>{result}</p>}
    </form>);
});
export const Info = createBlock(({ data: footer, global }) => {
    const localize = useLocalize();
    if (!footer || !global.info)
        return null;
    return (<div className="flex flex-col gap-2 ">
      <div className="flex items-center gap-3">
        <Phone className="h-5 w-5"/>
        <Button target="_blank" data-tina-field={tinaField(global.info, "phone")} href={`tel:${global.info.phone}`} variant={footer.linkVariant}>
          {global.info.phone}
        </Button>
      </div>
      <div className="flex items-center gap-1">
        <Mail className="h-5 w-5"/>
        <Button target="_blank" data-tina-field={tinaField(global.info, "email")} href={`mailto:${global.info.email}`} variant={footer.linkVariant}>
          {global.info.email}
        </Button>
      </div>
      <div className="flex items-center gap-1">
        <MapPin className="h-5 w-5"/>
        <Button target="_blank" data-tina-field={tinaField(global.info, "address")} href={`https://www.google.com/maps/place/${global.info.address}`} variant={footer.linkVariant}>
          {global.info.address}
        </Button>
      </div>
      <Text variant={footer.textVariant}>
        <span data-tina-field={tinaField(footer, "registerCode")}>{localize(footer.registerCode)}</span>:{" "}
        <span data-tina-field={tinaField(global.info, "registerCode")}>{global.info.registerCode}</span>
      </Text>
      <Text variant={footer.textVariant}>
        <span data-tina-field={tinaField(footer, "registerCode")}> {localize(footer.kmkr)}</span>:{" "}
        <span data-tina-field={tinaField(global.info, "KMKR")}>{global.info.KMKR}</span>
      </Text>
      <div className="flex gap-2">
        {global.social?.map((social, i) => (<SocialIcon key={i} item={social} className="text-foreground"/>))}
      </div>
    </div>);
});
export const FooterWithContact = createBlock(({ global, data: footer }) => {
    const localize = useLocalize();
    if (!footer || !global.info)
        return null;
    return (<Section id="footer" className="flex flex-col w-full py-20 gap-10 " className2="mt-auto">
      <div className="grid md:grid-cols-3 h-full gap-4">
        <div className="flex flex-col gap-4 h-full items-center md:items-start">
          <Image width={165} height={55} src={global.logo} alt={global.seo?.title} className=""/>
          <Info data={footer} global={global}/>
        </div>
        <div className="flex flex-col gap-3">
          <Text variant={footer.pages?.variant} className="text-lg font-semibold ">
            {localize(footer.pages?.text)}
          </Text>
          <div className="flex flex-col gap-2">
            {global.nav?.map((nav, i) => (<Button href={nav?.href} key={i} variant={footer.navVariant}>
                {localize(nav?.label)}
              </Button>))}
          </div>
        </div>
        <Contact data={footer} global={global}/>
      </div>
      <div className="flex justify-between">
        <Text variant={footer.copyrigth?.variant} data-tina-field={tinaField(footer, "copyrigth")}>
          © {new Date().getFullYear()} {localize(footer.copyrigth?.text)}
        </Text>
        <LangSelector />
      </div>
    </Section>);
});