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

import 'react-lazy-load-image-component/src/effects/blur.css';
import apiOdoo from "../../helpers/apiOdoo";
import currencyFormat from "../../helpers/currencyFormat";

export default function Cart() {
  const [products, setProducts] = useState([]);

  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
      }));
      setProducts(dataProducts);
    }
  }

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

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

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

  const updateQuantity = (productId, quantity) => {
    quantity = quantity == '' ? '' : parseInt(quantity);
    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;
    if (quantity <= 0) {
      deleteItemCart(productId);
      setProducts((products) => {
        products.splice(productIndexToUpdate, 1);
        return [...products];
      });
    } else {
      updateCart(productId, quantity);
    }
  }

  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-3 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-3 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">
          {products.map((product, index) => (
            <div className="flex gap-x-3" key={index}>
              <div className="w-4/12">
                <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="/" 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-light p-1 rounded-full" onClick={() => minusQuantity(product.id)}>
                      <MinusIcon className="stroke-gray_r-12 w-3"/>
                    </button>
                    <input 
                      type="number" 
                      className="bg-transparent border-none w-4 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-full" onClick={() => plusQuantity(product.id)}>
                      <PlusIcon className="stroke-gray_r-12 w-3"/>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          ))}
          </div>
          {/* [End] Product List */}

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