import { DocumentDuplicateIcon, ExclamationCircleIcon } from "@heroicons/react/24/solid";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import Alert from "../../components/Alert";
import AppBar from "../../components/AppBar";
import Image from "../../components/Image";
import Layout from "../../components/Layout";
import LineDivider from "../../components/LineDivider";
import Link from "../../components/Link";
import ProgressBar from "../../components/ProgressBar";
import apiOdoo from "../../helpers/apiOdoo";
import { useAuth } from "../../helpers/auth";
import { getCart } from "../../helpers/cart";
import currencyFormat from "../../helpers/currencyFormat";
import { createSlug } from "../../helpers/slug";


export default function Checkout() {
  const [auth, setAuth] = useAuth();
  const [address, setAddress] = useState(null);
  const [selectedAddress, setSelectedAddress] = useState(null);
  const [selectedPayment, setSelectedPayment] = useState(null);
  const [products, setProducts] = useState(null);
  const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0);
  const [totalTaxAmount, setTotalTaxAmount] = useState(0);
  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0);

  const payments = [
    { name: 'BCA', number: '8870-4000-81' },
    { name: 'MANDIRI', number: '155-0067-6869-75' },
  ];

  const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text);
  };

  const changePayment = (index) => {
    let payment = payments[index];
    if (selectedPayment == payment.name) {
      copyToClipboard(payment.number);
      toast.success('Nomor bank berhasil disalin', { position: 'bottom-center', duration: 1500 });
    } else {
      toast.success('Metode pembayaran berhasil diubah, tekan sekali lagi untuk salin nomor bank', { position: 'bottom-center', duration: 3000 });
    }
    setSelectedPayment(payment.name);
  }

  useEffect(() => {
    const getAddress = async () => {
      if (auth?.id) {
        const dataAddress = await apiOdoo('GET', `/api/v1/user/${auth.id}/address`);
        setAddress(dataAddress);
      }
    };
    getAddress();
  }, [auth]);

  useEffect(() => {
    const getProducts = async () => {
      let cart = getCart();
      let productIds = Object
        .values(cart)
        .filter((itemCart) => itemCart.to_process == 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,
          to_process: cart[product.id].to_process,
        }));
        setProducts(dataProducts);
      }
    };
    getProducts();
  }, []);
  
  useEffect(() => {
    if (address) setSelectedAddress(address[0]);
  }, [address]);

  useEffect(() => {
    if (products) {
      const productsToProcess = products.filter((product) => product.to_process == true);
      let calculateTotalPriceBeforeTax = 0;
      let calculateTotalTaxAmount = 0;
      let calculateTotalDiscountAmount = 0;
      productsToProcess.forEach(product => {
        let priceBeforeTax = product.price.price / 1.11; 
        calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity;
        calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity;
        calculateTotalDiscountAmount += (product.price.price - product.price.price_discount) * product.quantity;
      });
      setTotalPriceBeforeTax(calculateTotalPriceBeforeTax);
      setTotalTaxAmount(calculateTotalTaxAmount);
      setTotalDiscountAmount(calculateTotalDiscountAmount);
    }
  }, [products]);

  return (
    <Layout>
      <AppBar title="Checkout" />

      <ProgressBar 
        current={2}
        labels={['Keranjang', 'Pembayaran', 'Selesai']}
      />

      <LineDivider/>

      <Alert type="info" className="text-caption-2 flex gap-x-3 items-center my-2">
        <div>
          <ExclamationCircleIcon className="w-6 text-blue-700"/>
        </div>
        <span>Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami disini</span>
      </Alert>

      <LineDivider/>

      <div className="p-4">
        <div className="flex justify-between items-center">
          <h2>Alamat Pengiriman</h2>
          <Link className="text-caption-1" href="/">Ubah Alamat</Link>
        </div>

        { selectedAddress && (
          <div className="mt-4 text-caption-1">
            <p className="font-medium">{ selectedAddress.name }</p>
            <p className="mt-2 text-gray_r-11">{ selectedAddress.mobile }</p>
            <p className="mt-1 text-gray_r-11">{ selectedAddress.street } { selectedAddress.street2 }</p>
          </div>
        ) }
      </div>

      <LineDivider/>

      <div className="p-4 flex flex-col gap-y-4">
        {products && products.map((product, index) => (
          <div className="flex gap-x-3" key={index}>
            <div className="w-4/12 flex items-center gap-x-2">
              <Image
                src={product.parent.image} 
                alt={product.parent.name} 
                className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md"
              />
            </div>
            <div className="w-8/12 flex flex-col">
              <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)} className="product-card__title wrap-line-ellipsis-2">
                {product.parent.name}
              </Link>
              <p className="text-caption-2 text-gray_r-11 mt-1">
                {product.code || '-'}
                {product.attributes.length > 0 ? ` | ${product.attributes.join(', ')}` : ''}
              </p>
              <p className="text-caption-2 text-gray_r-11 mt-1">
                {currencyFormat(product.price.price_discount)} × {product.quantity} Barang
              </p>
              <p className="text-caption-2 text-gray_r-12 font-bold mt-2">
                {currencyFormat(product.quantity * product.price.price_discount)}
              </p>
            </div>
          </div>
        ))}
      </div>

      <LineDivider/>
      
      {products && (
        <div className="p-4">
          <div className="flex justify-between items-center">
            <h2>Ringkasan Pesanan</h2>
            <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>Subtotal</p>
              <p className="font-medium">{currencyFormat(totalPriceBeforeTax)}</p>
            </div>
            <div className="flex gap-x-2 justify-between">
              <p>PPN 11%</p>
              <p className="font-medium">{currencyFormat(totalTaxAmount)}</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>
          <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(totalPriceBeforeTax + totalTaxAmount - 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">
        <h2>Pilih Metode Pembayaran</h2>
        <div className="grid gap-y-3 mt-4">
          { payments.map((payment, index) => (
            <button 
              type="button" 
              className={"text-left border border-gray_r-6 rounded-md p-3 " + (selectedPayment == payment.name && 'border-yellow_r-10 bg-yellow_r-3')} 
              onClick={() => changePayment(index)}
              key={index}
            >
              <p>{payment.name} - {payment.number}</p>
              <p className="mt-1 text-gray_r-11">PT. Indoteknik Dotcom Gemilang</p>
            </button>
          )) }
        </div>
      </div>

      <LineDivider/>

      <div className="flex gap-x-3 p-4">
        <button 
          className="flex-1 btn-yellow"
          onClick={() => router.push('/shop/checkout')}
        >
          Bayar
        </button>
      </div>
    </Layout>
  )
}