import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
import { useEffect, useState } from "react";
import Alert from "../../components/Alert";
import AppBar from "../../components/AppBar";
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";


export default function Checkout() {
  const [auth, setAuth] = useAuth();
  const [address, setAddress] = useState(null);
  const [selectedAddress, setSelectedAddress] = useState(null);
  const [products, setProducts] = useState(null);

  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]);

  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/>
    </Layout>
  )
}
// odoo = 1677721600
// from = 3026531840
// to = 3355443200

// odoo = 629145600
// from = 2355443200
// to = 1258291200