"use client";

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

import { zodResolver } from "@hookform/resolvers/zod";
import { Controller, useForm } from "react-hook-form";
import toast from "react-hot-toast";
import z from "zod";

import EnvelopeClosedSVG from "@/assets/icons/envelope-closed.svg";
import PhoneSVG from "@/assets/icons/phone.svg";
import UserSVG from "@/assets/icons/user.svg";

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

import { createOrder } from "@/services/actions/orderAPI";
import type { Cart } from "@/services/models/Cart";
import { useRouter } from "next/navigation";
import styles from "./CheckoutPanel.module.scss";

export const formSchema = z.object({
  address: z.object(
    {
      line1: z.string(),
      city: z.string(),
      zip: z.number(),
    },
    "Адрес обязателен.",
  ),
});

export default function CheckoutPanel({
  user,
  cart,
}: {
  user: User;
  cart: Cart;
}) {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(formSchema),
  });

  const router = useRouter();

  async function onSubmit(data: z.infer<typeof formSchema>) {
    const order = {
      address: data.address,
      items: cart.items,
      totals: cart.totals,
    };

    const promise = createOrder(order);

    await toast.promise(promise, {
      loading: "Оформляем Ваш заказ...",
      success: "Заказ успешно размещён.",
      error: "Упс! Что-то пошло не так :(",
    });

    router.replace("/account/orders");
  }

  return (
    <div className={styles["checkout-panel"]}>
      <div className={styles["checkout-panel__body"]}>
        <div className={styles["checkout-panel__sections-container"]}>
          <div className={styles["checkout-panel__section"]}>
            <span className={styles["checkout-panel__details-heading"]}>
              Персональная Информация
            </span>

            <div className={styles["checkout-panel__details-container"]}>
              <div className={styles["checkout-panel__detail"]}>
                <EnvelopeClosedSVG
                  className={styles["checkout-panel__detail-icon"]}
                />

                <span className={styles["checkout-panel__detail-value"]}>
                  {user.email}
                </span>
              </div>

              <div className={styles["checkout-panel__detail"]}>
                <UserSVG className={styles["checkout-panel__detail-icon"]} />

                <span className={styles["checkout-panel__detail-value"]}>
                  {user.name}
                </span>
              </div>

              <div className={styles["checkout-panel__detail"]}>
                <PhoneSVG className={styles["checkout-panel__detail-icon"]} />

                <span className={styles["checkout-panel__detail-value"]}>
                  {user.phoneNumber}
                </span>
              </div>
            </div>
          </div>

          <div className={styles["checkout-panel__section"]}>
            <span className={styles["checkout-panel__details-heading"]}>
              Адрес Доставки
            </span>

            <Controller
              control={control}
              name="address"
              render={({ field }) => (
                <AccountAddresses
                  user={user}
                  type="checkout"
                  onSelect={field.onChange}
                />
              )}
            />
          </div>
        </div>

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

      <Button
        variant="primary"
        fill
        onClick={() => void handleSubmit(onSubmit)()}
      >
        Оформить заказ
      </Button>
    </div>
  );
}