import WithAuth from "@/components/auth/WithAuth";
import LineDivider from "@/components/elements/LineDivider";
import Link from "@/components/elements/Link";
import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import VariantCard from "@/components/variants/VariantCard";
import apiOdoo from "@/core/utils/apiOdoo";
import { useAuth } from "@/core/utils/auth";
import { deleteItemCart, getCart } from "@/core/utils/cart";
import currencyFormat from "@/core/utils/currencyFormat";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";

export default function Quotation() {
  const router = useRouter();
  const [ auth ] = useAuth();
  const [ products, setProducts ] = useState([]);
  const [ totalAmount, setTotalAmount ] = useState(0);
  const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0);

  useEffect(() => {
    const getProducts = async () => {
      let cart = getCart();
      let productIds = Object
        .values(cart)
        .filter((itemCart) => itemCart.selected == true)
        .map((itemCart) => itemCart.product_id);
      if (productIds.length > 0) {
        productIds = productIds.join(',');
        let dataProducts = await apiOdoo('GET', `/api/v1/product_variant/${productIds}`);
        dataProducts = dataProducts.map((product) => ({
          ...product,
          quantity: cart[product.id].quantity,
          selected: cart[product.id].selected,
        }));
        setProducts(dataProducts);
      }
    };
    getProducts();
  }, [ router, auth ]);

  useEffect(() => {
    if (products) {
      let calculateTotalAmount = 0;
      let calculateTotalDiscountAmount = 0;
      products.forEach(product => {
        calculateTotalAmount += product.price.price * product.quantity;
        calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity;
      });
      setTotalAmount(calculateTotalAmount);
      setTotalDiscountAmount(calculateTotalDiscountAmount);
    }
  }, [products]);

  const submitQuotation = async () => {
    let productOrder = products.map((product) => ({ 'product_id': product.id, 'quantity': product.quantity }));
    let data = {
      'partner_shipping_id': auth.partner_id,
      'partner_invoice_id': auth.partner_id,
      'order_line': JSON.stringify(productOrder)
    };
    const quotation = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/checkout`, data);
    for (const product of products) {
      deleteItemCart(product.id);
    }
    if (quotation?.id) {
      router.push(`/shop/quotation/finish?id=${quotation.id}`);
      return;
    };
    toast.error('Terdapat kesalahan internal, hubungi kami');
  }
  return (
    <WithAuth>
      <Layout>
        <AppBar title="Penawaran Harga" />

        <div className="p-4 flex flex-col gap-y-4">
          <p className="h2">Produk</p>
          {products.map((product, index) => (
            <VariantCard
              data={product}
              openOnClick={false}
              key={index}
            />
          ))}
        </div>

        <LineDivider />

        <div className="p-4">
          <div className="flex justify-between items-center">
            <p className="h2">Ringkasan Penawaran</p>
            <p className="text-gray_r-11 text-caption-1">{products.length} Barang</p>
          </div>
          <hr className="my-4 border-gray_r-6"/>
          <div className="flex flex-col gap-y-4">
            <div className="flex gap-x-2 justify-between">
              <p>Total Belanja</p>
              <p className="font-medium">{currencyFormat(totalAmount)}</p>
            </div>
            <div className="flex gap-x-2 justify-between">
              <p>Total Diskon</p>
              <p className="font-medium text-red_r-11">{'- ' + currencyFormat(totalDiscountAmount)}</p>
            </div>
            <div className="flex gap-x-2 justify-between">
              <p>Subtotal</p>
              <p className="font-medium">{currencyFormat(totalAmount - totalDiscountAmount)}</p>
            </div>
            <div className="flex gap-x-2 justify-between">
              <p>PPN 11% (Incl.)</p>
              <p className="font-medium">{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}</p>
            </div>
          </div>
          <hr className="my-4 border-gray_r-6"/>
          <div className="flex gap-x-2 justify-between mb-4">
            <p>Grand Total</p>
            <p className="font-medium text-yellow_r-11">{currencyFormat(totalAmount - totalDiscountAmount)}</p>
          </div>
          <p className="text-caption-2 text-gray_r-10 mb-2">*) Belum termasuk biaya pengiriman</p>
          <p className="text-caption-2 text-gray_r-10 leading-5">
            Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui <Link href="/">Syarat & Ketentuan</Link> yang berlaku
          </p>
        </div>

        <LineDivider />

        <div className="p-4">
          <button 
            type="button" 
            className="btn-yellow w-full" 
            onClick={submitQuotation}
          >
            Kirim Penawaran
          </button>
        </div>
      </Layout>
    </WithAuth>
  )
}