import { useState, type Dispatch, type SetStateAction } from "react";

import type { User } from "@/services/models/User";

import { useForm } from "react-hook-form";
import toast from "react-hot-toast";

import CloseSVG from "@/assets/icons/close.svg";
import PenSVG from "@/assets/icons/pen.svg";

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

import {
  createAddress,
  deleteAddress,
  updateAddress,
} from "@/services/actions/usersAPI";

import styles from "./AddressCard.module.scss";

interface FormData {
  line1: string;
  city: string;
  zip: number;
}

export default function AddressCard({
  isCreating,
  setIsCreating,
  user,
  type,
  address,
  onSelect,
}: {
  isCreating?: boolean;
  setIsCreating?: Dispatch<SetStateAction<boolean>>;
  user: User;
  type?: "checkout";
  address?: User["addresses"][number];
  onSelect: (address: User["addresses"][number]) => void;
}) {
  const [isUpdating, setIsUpdating] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>({
    defaultValues: {
      line1: address?.line1,
      city: address?.city,
      zip: address?.zip,
    },
  });

  const onSubmit = handleSubmit((data) => {
    const promise = isUpdating
      ? updateAddress(address?._id.toString(), data)
      : createAddress(data);

    void toast.promise(promise, {
      loading: "Загрузка...",
      success: isUpdating
        ? "Платежный адрес успешно обновлен."
        : "Платежный адрес успешно создан.",
      error: "Упс! Что-то пошло не так :(",
    });

    setIsCreating?.(false);
    setIsUpdating(false);
  });

  async function handleDeleteAddress() {
    setIsCreating?.(false);
    setIsUpdating(false);

    await deleteAddress(address?._id.toString());
  }

  return (
    <article className={styles["address-card"]}>
      <div className={styles["address-card__header"]}>
        {!isCreating ? (
          type === "checkout" ? (
            <input
              type="radio"
              name="address"
              id={address?._id.toString()}
              onChange={(event) => {
                if (event.target.checked) {
                  onSelect({
                    line1: address?.line1,
                    city: address?.city,
                    zip: address?.zip,
                  });
                }
              }}
            />
          ) : (
            <span className={styles["address-card__heading"]}>
              Адрес доставки
            </span>
          )
        ) : (
          <span></span>
        )}

        {isCreating || isUpdating ? (
          <Button
            variant="plain"
            iconStart={CloseSVG}
            onClick={() => {
              setIsCreating?.(false);
              setIsUpdating(false);
            }}
          >
            Закрыть
          </Button>
        ) : (
          <Button
            variant="plain"
            iconStart={PenSVG}
            onClick={() => {
              setIsUpdating(true);
            }}
          >
            Изменить
          </Button>
        )}
      </div>

      <div className={styles["address-card__body"]}>
        {isCreating || isUpdating ? (
          <form
            onSubmit={(event) => void onSubmit(event)}
            className={styles["address-card__form"]}
          >
            <div className={styles["address-card__form-body"]}>
              <div className={styles["address-card__input-container"]}>
                <div className={styles["address-card__input-wrapper"]}>
                  <label htmlFor="name">Полное имя</label>
                  <input
                    type="text"
                    name="name"
                    id="name"
                    value={user.name}
                    disabled
                  />
                </div>
              </div>
              <div className={styles["address-card__input-container"]}>
                <div className={styles["address-card__input-wrapper"]}>
                  <label htmlFor="line1">Улица</label>
                  <input
                    type="text"
                    id="line1"
                    {...register("line1", {
                      required: "Улица является обязательным полем.",
                    })}
                  />
                </div>

                {errors.line1?.message && (
                  <p className={styles["address-card__input-error"]}>
                    {errors.line1.message}
                  </p>
                )}
              </div>
              <div className={styles["address-card__input-container"]}>
                <div className={styles["address-card__input-wrapper"]}>
                  <label htmlFor="city">Город</label>
                  <input
                    type="text"
                    id="city"
                    {...register("city", {
                      required: "Город является обязательным полем.",
                    })}
                  />
                </div>

                {errors.city?.message && (
                  <p className={styles["address-card__input-error"]}>
                    {errors.city.message}
                  </p>
                )}
              </div>
              <div className={styles["address-card__input-container"]}>
                <div className={styles["address-card__input-wrapper"]}>
                  <label htmlFor="zip">Почтовый индекс</label>
                  <input
                    type="number"
                    id="zip"
                    {...register("zip", {
                      required: "Почтовый индекс является обязательным полем.",
                    })}
                  />
                </div>

                {errors.zip?.message && (
                  <p className={styles["address-card__input-error"]}>
                    {errors.zip.message}
                  </p>
                )}
              </div>
            </div>

            {isUpdating ? (
              <div className={styles["address-card__button-group"]}>
                <Button variant="primary" fill>
                  Изменить
                </Button>

                <Button
                  type="button"
                  variant="primary"
                  onClick={() => void handleDeleteAddress()}
                  fill
                  className={styles["address-card__danger-button"]}
                >
                  Удалить
                </Button>
              </div>
            ) : (
              <Button variant="primary" fill>
                Добавить
              </Button>
            )}
          </form>
        ) : (
          <>
            <span className={styles["address-card__field"]}>{user.name}</span>
            <span className={styles["address-card__field"]}>
              {address?.line1}
            </span>
            <span className={styles["address-card__field"]}>
              {address?.city}
            </span>
            <span className={styles["address-card__field"]}>
              {address?.zip}
            </span>
          </>
        )}
      </div>
    </article>
  );
}