import { RegisterOptions, useFormContext } from "react-hook-form";
import EmailIcon from "../../resources/icons/emailIcon";
import {
  emailInputValidation,
  requiredInputValidation,
} from "../../util/registerOptions";
import Input from "../input/input";
import React, { useEffect, useState } from "react";
import { ObjectEncryptor } from "../../util/ObjectEncrypter";
import { BorderRadiusType, FontType } from "../../context/themeProvider";
import InfoIcon from "../../resources/icons/infoIcon";
import { previewAPIOrigin, previewFormsOrigin } from "../../util/constants";
import CompensationSnippet from "../../snippets/compensationSnippet";

export type FreemiumConfiguration = {
  primaryColor?: string;
  font?: FontType;
  borderRadius?: BorderRadiusType;
  email?: string;
  lawFirmName?: string;
};

export default function LawFirmDataTab() {
  const { getValues, watch, setValue } = useFormContext();

  const updatedLawFirmName = watch("lawFirmName");
  const updatedEmail = watch("emailAddress");
  const updatedConfirmEmail = watch("confirmEmail");
  const updatedHex = watch("hex");
  const updatedFont = watch("font");
  const updatedBorder = watch("borderState");
  const freemiumHash = watch("freemiumHash");

  useEffect(() => {
    async function encrypt() {
      if (updatedLawFirmName && updatedEmail) {
        const hash = await ObjectEncryptor.encrypt<FreemiumConfiguration>(
          {
            borderRadius: updatedBorder,
            font: updatedFont,
            primaryColor: updatedHex,
            email: updatedEmail,
            lawFirmName: updatedLawFirmName,
          },
          "3530942237"
        );
        setValue("freemiumHash", hash);
      }
    }
    encrypt();
  }, [
    updatedLawFirmName,
    updatedEmail,
    updatedConfirmEmail,
    updatedHex,
    updatedFont,
    updatedBorder,
    setValue,
  ]);

  return (
    <div>
      <div className="flex gap-6 break-words">
        <h1 className="text-3xl font-bold break-words">Angaben zur Kanzlei</h1>
      </div>

      <div className="mt-12">
        <Input
          name="lawFirmName"
          label="Name der Kanzlei *"
          type="text"
          registerOptions={requiredInputValidation}
        />
      </div>
      <p className="text-xl font-bold mt-12">
        An diese E-Mail-Adresse werden gewonnene Leads gesendet{" "}
      </p>
      <div className="mt-4 grid grid-cols-5 sm:grid-cols-10 gap-6">
        <Input
          type="email"
          name="emailAddress"
          label="E-Mail *"
          iconLeft={<EmailIcon className="h-6 w-6" />}
          wrapperClassName="col-span-5"
          autoComplete="email"
          registerOptions={
            {
              ...requiredInputValidation,
              ...emailInputValidation,
            } as RegisterOptions
          }
          inputMode="email"
        />

        <Input
          type="email"
          name="confirmEmail"
          label="E-Mail bestätigen *"
          iconLeft={<EmailIcon className="h-6 w-6" />}
          wrapperClassName="col-span-5"
          autoComplete="nope"
          registerOptions={
            {
              ...requiredInputValidation,
              ...emailInputValidation,
              validate: (confirmEmail) =>
                getValues("emailAddress").toLowerCase() ===
                  confirmEmail.toLowerCase() ||
                "Die E-Mail Adressen stimmen nicht überein",
            } as RegisterOptions
          }
          inputMode="email"
        />
      </div>

      <div className="p-6 mt-12 w-full flex gap-6 items-center rounded-xl bg-semantic-info-10">
        <div className="hidden xxs:block">
          <InfoIcon
            fill="semantic-info"
            className="fill-semantic-info w-8 h-8"
          />
        </div>
        <p>
          <span className="font-bold">Wichtig:</span> Die Angaben müssen
          dringend korrekt sein. Sonst erhält eure Kanzlei ggf. nicht Leads
          und/oder die Widgets sind nicht DSGVO-konform.
        </p>
      </div>

      {updatedEmail === updatedConfirmEmail &&
        updatedEmail &&
        updatedLawFirmName && (
          <div className="mt-12">
            <h3 className="font-bold text-xl">
              Einstellungen testen anhand des{" "}
              <span className="font-mono text-xl underline">
                Abfindungsrechners
              </span>
            </h3>
            <p>
              Testet eure Einstellungen und stellt sicher, dass nach dem
              Absenden die E-Mail mit den Lead-Informationen an die oben
              eingegebene E-Mail Adresse gesendet wurden. Prüft euren
              Spam-Filter.
            </p>
            <div className="mt-12 border border-neutral-medium p-6 rounded-lg">
              <p className="text-lg font-bold">
                Leadbooster für diesen Test:{" "}
                <span className="font-mono underline">Abfindungsrechners</span>
              </p>
              <p className="mt-4">
                <span className="font-bold text-lg">Info:</span> Dieser Rechner
                dient ausschließlich dem Test der E-Mail-Adresse und bezieht
                sich nicht auf die Auswahl Ihrer Leadbooster.
              </p>
              <div className="mt-6 hyphens-auto" lang="de">
                <CompensationSnippet
                  freemiumConfig={freemiumHash}
                  formsorigin={previewFormsOrigin}
                  origin={previewAPIOrigin}
                  useScript={false}
                />
              </div>
            </div>
          </div>
        )}
    </div>
  );
}