import { useLoaderData, Form, useActionData } from "react-router-dom";
import { CartPlusFill } from "react-bootstrap-icons"
import { InfoModal } from "../../components/info_modal";
import { Modal } from "flowbite";
import ProductListing from "../../components/product_listing";
import MainContentLayout from "../../components/main_content_layout";
import Review from "../../components/review";
import "../../components/stylesheets/shared.css"
import { useEffect } from "react";


export default function Product() {
  let quantity_field;
  const response = useLoaderData();
  const response_status = useActionData();
  const product = response[0].data;
  const reviews = response[1].data.data.map(review =>
    <li key={review.id}>
      <Review review={review}/>
    </li>
  );

  useEffect(() => {
    const target = document.getElementById("info-modal");
    const options = {
      placement: 'center-center',
      backdrop: 'dynamic',
      backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
      closable: true
    };
    const modal = new Modal(target, options);
    document.getElementById('modal-button')?.addEventListener("click", () => {
      modal.hide();
    });

    if(response_status == 200)
      modal.show();

  }, [response_status]);

  if(response_status == 422) {
    quantity_field = (
      <div className="mx-2 w-17">
        <input type="number" id="quantity-field" name="quantity" className="bg-red-50 border border-red-500 text-red-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
               min='1' max={product.data.attributes.available_quantity} placeholder={1}/>
      </div>
    );
  }
  else {
    quantity_field = (
      <div className="mx-2 w-17">
        <input type="number" id="quantity-field" name="quantity" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               min='1' max={product.data.attributes.available_quantity} placeholder={1} placeholder={1}/>
      </div>
    );
  }

  return (
    <>
      <MainContentLayout>
        <ProductListing product={product.data}/>
        <div className="my-2 flex flex-flow-reverse w-4/6">
          <Form method="post" id="cart-button" className="flex h-10">
            {quantity_field}
            <button className="flex inline-block rounded button w-50 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
              <CartPlusFill size={16}/>
              <span className="mx-2">Añadir al carrito</span>
            </button>
          </Form>
        </div>
        <div className="my-4">
          <ul>
            {reviews}
          </ul>
        </div>
        <InfoModal text="El producto se ha añadido a su carrito"/>
      </MainContentLayout>
    </>
  );
}