import { useEffect, useState } from "react";
import Header from "../../components/Header";
import Layout from "../../components/Layout";
import Link from "../../components/Link";
import { createOrUpdateItemCart, deleteItemCart, getCart } from "../../helpers/cart";
import ChevronLeftIcon from "../../icons/chevron-left.svg";
import MinusIcon from "../../icons/minus.svg";
import PlusIcon from "../../icons/plus.svg";
import TrashIcon from "../../icons/trash.svg";
import { LazyLoadImage } from "react-lazy-load-image-component";
import apiOdoo from "../../helpers/apiOdoo";
import currencyFormat from "../../helpers/currencyFormat";

import 'react-lazy-load-image-component/src/effects/blur.css';
import { createSlug } from "../../helpers/slug";

export default function Cart() {
  const [products, setProducts] = useState([]);
  const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0);
  const [totalTaxAmount, setTotalTaxAmount] = useState(0);
  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0);

  const getProducts = async () => {
    let cart = getCart();
    let productIds = Object.keys(cart);
    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: false
      }));
      setProducts(dataProducts);
    }
  }

  useEffect(() => {
    getProducts();
  }, []);

  useEffect(() => {
    const productsToProcess = products.filter((product) => product.to_process == true);
    if (products.length > 0) {
      
      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]);

  const updateCart = (productId, quantity) => {
    let productIndexToUpdate = products.findIndex((product) => product.id == productId);
    if (quantity != '') createOrUpdateItemCart(productId, quantity);
    let productsToUpdate = products;
    productsToUpdate[productIndexToUpdate].quantity = quantity;
    setProducts([...productsToUpdate]);
  };

  const blurQuantity = (productId, quantity) => {
    quantity = quantity == ('' || 0) ? 1 : parseInt(quantity);
    updateCart(productId, quantity);
  };

  const updateQuantity = (productId, quantity) => {
    quantity = quantity == '' ? '' : parseInt(quantity);
    if (quantity > 0) {
      updateCart(productId, quantity);
    }
  };

  const plusQuantity = (productId) => {
    let productIndexToUpdate = products.findIndex((product) => product.id == productId);
    let quantity = products[productIndexToUpdate].quantity + 1;
    updateCart(productId, quantity);
  }

  const minusQuantity = (productId) => {
    let productIndexToUpdate = products.findIndex((product) => product.id == productId);
    let quantity = products[productIndexToUpdate].quantity - 1;
    updateCart(productId, quantity);
  }

  const deleteItem = (productId) => {
    let productIndexToUpdate = products.findIndex((product) => product.id == productId);
    let productsToUpdate = products;
    productsToUpdate.splice(productIndexToUpdate, 1);
    setProducts([...productsToUpdate]);
    deleteItemCart(productId);
  }

  const toggleProductToProcess = (productId) => {
    let productIndexToUpdate = products.findIndex((product) => product.id == productId);
    let productsToUpdate = products;
    productsToUpdate[productIndexToUpdate].to_process = !productsToUpdate[productIndexToUpdate].to_process;
    setProducts([...productsToUpdate]);
  }

  return (
    <>
      <Header title={`Keranjang Belanja - Indoteknik`}/>
      <Layout>
        {/* jsx-start: Progress Bar */}
        <div className="bg-gray_r-2 flex gap-x-2 p-4 rounded-md">
          <div className="flex gap-x-2 items-center">
            <div className="bg-yellow_r-9 leading-none p-2 rounded-full w-7 text-center text-gray_r-12 text-caption-2">1</div>
            <p className="font-medium text-gray_r-12 text-caption-2">Keranjang</p>
          </div>
          <div className="flex-1 flex items-center">
            <div className="h-0.5 w-full bg-gray_r-7"></div>
          </div>
          <div className="flex gap-x-2 items-center">
            <div className="bg-gray_r-4 leading-none p-2 rounded-full w-7 text-center text-gray_r-11 text-caption-2">2</div>
            <p className="font-medium text-gray_r-11 text-caption-2">Pembayaran</p>
          </div>
          <div className="flex-1 flex items-center">
            <div className="h-0.5 w-full bg-gray_r-7"></div>
          </div>
          <div className="flex gap-x-2 items-center">
            <div className="bg-gray_r-4 leading-none p-2 rounded-full w-7 text-center text-gray_r-11 text-caption-2">3</div>
            <p className="font-medium text-gray_r-11 text-caption-2">Selesai</p>
          </div>
        </div>
        {/* [End] Progress Bar */}
        <div className="p-4">

          {/* [Start] Title */}
          <div className="flex gap-x-2 mb-8">
            <Link href="/" className="pr-2">
              <ChevronLeftIcon className="w-6 stroke-gray_r-12"/>
            </Link>
            <h1>Keranjang Saya</h1>
          </div>
          {/* [End] Title */}

          {/* [Start] Product List */}
          <div className="flex flex-col gap-y-6 mb-8">
          {products.map((product, index) => (
            <div className="flex gap-x-3" key={index}>
              <div className="w-4/12 flex items-center gap-x-2">
                <button 
                  className={'p-2 rounded border-2 ' + (product.to_process ? 'border-yellow_r-9 bg-yellow_r-9' : 'border-gray_r-6')} 
                  onClick={() => toggleProductToProcess(product.id)}
                ></button>
                <LazyLoadImage effect="blur" src={product.parent.image ? product.parent.image : '/images/noimage.jpeg'} 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-1 text-gray_r-11 mt-1">{product.code ? product.code : '-'}</p>
                <div className="flex flex-wrap gap-x-1 items-center mb-2 mt-auto">
                  <p className="text-caption-1 text-gray_r-12">{currencyFormat(product.price.price_discount)}</p>
                  {product.price.discount_percentage > 0 ? (
                    <>
                      <span className="badge-red">{product.price.discount_percentage}%</span>
                      <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.price.price)}</p>
                    </>
                  ) : ''}
                  
                </div>
                <div className="flex items-center">
                  <p className="mr-auto text-caption-1 text-gray_r-12 font-bold">{currencyFormat(product.quantity * product.price.price_discount)}</p>
                  <div className="flex gap-x-2">
                    <button 
                      className="btn-red p-1 rounded"
                      onClick={() => deleteItem(product.id)}
                    >
                      <TrashIcon className="stroke-red_r-12 w-3"/>
                    </button>
                    <button 
                      className="btn-light p-1 rounded" 
                      disabled={product.quantity == 1} 
                      onClick={() => minusQuantity(product.id)}
                    >
                      <MinusIcon className={'stroke-gray_r-12 w-3' + (product.quantity == 1 ? ' stroke-gray_r-11' : '')}/>
                    </button>
                    <input 
                      type="number" 
                      className="bg-transparent border-none w-6 text-center outline-none" 
                      onBlur={(e) => blurQuantity(product.id, e.target.value)} 
                      onChange={(e) => updateQuantity(product.id, e.target.value)} 
                      value={product.quantity} 
                    />
                    <button className="btn-light p-1 rounded" onClick={() => plusQuantity(product.id)}>
                      <PlusIcon className="stroke-gray_r-12 w-3"/>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          ))}
          </div>
          {/* [End] Product List */}

          {/* [Start] Review Order */}
          <div className="p-4 border border-gray_r-6 rounded-md mb-4">
            <h2>Ringkasan Pesanan</h2>
            <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>Harga Sebelum PPN</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>Total Harga</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>
          {/* [End] Review Order */}

          {/* [Start] Submit Button */}
          <div className="flex gap-x-3">
            <button className="flex-1 btn-light">Quotation (1)</button>
            <button className="flex-1 btn-yellow">Bayar (1)</button>
          </div>
          {/* [End] Submit Button */}

        </div>
      </Layout>
    </>
  );
}