"use client";

import type { ChangeEvent, SubmitEvent } from "react";

import { useState } from "react";
import toast from "react-hot-toast";

import EnvelopeClosedSVG from "@/assets/icons/envelope-closed.svg";
import WarningSVG from "@/assets/icons/warning.svg";

import Button from "@/components/Button/Button";

import clsx from "clsx";
import { isRedirectError } from "next/dist/client/components/redirect-error";
import styles from "./NewsletterCTA.module.scss";

export default function NewsletterCTA() {
  const [email, setEmail] = useState("");
  const [showError, setShowError] = useState(false);

  const emailRegExp = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/;
  const isValidEmail = emailRegExp.test(email);
  const errorMessage =
    showError && !isValidEmail ? "Невалидный почтовый адрес." : null;

  const LabelIcon = errorMessage ? WarningSVG : EnvelopeClosedSVG;

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    event.preventDefault();

    setEmail(event.target.value);
  }

  function handleSubmit(event: SubmitEvent<HTMLFormElement>) {
    event.preventDefault();

    if (isValidEmail) {
      void toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
        loading: "Подписка на почтовую рассылку...",
        success: "Подписка успешна.",
        error: (error: unknown) => {
          if (isRedirectError(error)) return null;

          return error?.toString() ?? "Упс! Что-то пошло не так :(";
        },
      });
    }

    setShowError(true);
  }

  return (
    <div className={styles["newsletter-cta"]}>
      <span className={styles["newsletter-cta__heading"]}>
        подпишитесь на рассылку
      </span>

      <form
        noValidate
        autoComplete="off"
        onSubmit={handleSubmit}
        className={styles["newsletter-cta__form"]}
      >
        <div
          className={clsx(
            styles["newsletter-cta__input-container"],
            errorMessage && styles["newsletter-cta__input-container--error"],
          )}
        >
          <label htmlFor="email" className={styles["newsletter-cta__label"]}>
            <span className="visually-hidden">Адрес электронной почты</span>

            <LabelIcon className={styles["newsletter-cta__label-icon"]} />
          </label>

          <input
            type="email"
            name="email"
            id="email"
            placeholder="Введите Вашу Почту"
            value={email}
            onChange={handleChange}
            className={styles["newsletter-cta__input"]}
          />
        </div>

        <Button
          variant="primary"
          size="medium"
          className={styles["newsletter-cta__button"]}
        >
          Подписаться
        </Button>
      </form>

      {errorMessage && (
        <span className={styles["newsletter-cta__error-message"]}>
          {errorMessage}
        </span>
      )}
    </div>
  );
}