import { Drawer, InputNumber } from "antd";
import React, { useEffect, useRef, useState } from "react";
import Button from "../../../components/common/Button";
import { formatNumber } from "../../../utils";
import { useAppStore } from "../../../store/appStore";
import IconCheck from "../../../components/Icon/IconCheck";
import { alerts } from "../../../utils/alerts";
import { findStock } from "../../../utils/productUltis";
import { IconClose } from "../../../components/Icon";
type CartProductItemModalProps = {
  item: {
    id: number;
    quantity: number;
    item_price: number;
    before_discount_price: number;
    bonus_product_name: string;
    product: {
      id: number;
      name: string;
      price: number;
      check_inventory: boolean;
      min_price: number;
      max_price: number;
      min_price_before_override: number;
      max_price_before_override: number;
      quantity_in_stock_with_distribute: number;
      distributes: {
        name: string;
        sub_element_distribute_name: string;
        element_distributes: {
          id: number;
          name: string;
          price: number;
          image_url: string;
          quantity_in_stock: number;
          sub_element_distributes: {
            id: number;
            name: string;
            price: number;
            quantity_in_stock: number;
          }[];
        }[];
      }[];
      product_discount: {
        discount_price: number;
        value: number;
      };
    };
    distributes_selected: {
      name: string;
      value: string;
      sub_element_distributes: any;
    }[];
  };
  isShowDrawer: boolean;
  setShowDrawer: Function;
  image_url?: string;
  getMaxQuantity: Function;
  handleChangeBtnQuantity: Function;
};
export default function ModalDistributesProduct({
  item,
  isShowDrawer,
  setShowDrawer,
  image_url,
  getMaxQuantity,
  handleChangeBtnQuantity,
}: CartProductItemModalProps) {
  const { product, item_price, before_discount_price, distributes_selected } =
    item;
  let {
    price,
    product_discount,
    distributes,
    check_inventory,
    quantity_in_stock_with_distribute,
    min_price,
    max_price,
    min_price_before_override,
    max_price_before_override,
  } = product;
  let pastPrice = price;
  if (product_discount) price = product_discount.discount_price;

  const { appTheme } = useAppStore((state) => state);
  const [quantity, setQuantity] = useState(item.quantity);

  const [selectedProduct, setSelectedProduct] = useState({
    value: "",
    sub_element_distributes: "",
    price: 0,
    quantityInStock: quantity_in_stock_with_distribute,
  });
  const quantityInputRef = useRef();
  const [selectedFilter, setSelectedFilter] = useState({
    indexDistribute: -1,
    indexSubDistribute: -1,
    numberQuantity:
      quantity_in_stock_with_distribute > 0 || check_inventory == false
        ? 1
        : quantity_in_stock_with_distribute === -1
        ? 1
        : 0,
  });

  const handleSelectedDistribute = (index: number) => {
    setQuantity(1);
    setSelectedFilter((prev) => ({ ...prev, indexDistribute: index }));
    let priceCurrent = 0;
    let quantityCurrent = 0;
    let value = "";

    if (selectedFilter.indexSubDistribute !== -1) {
      if (
        distributes[0].element_distributes[index].sub_element_distributes
          .length > 0
      ) {
        priceCurrent =
          distributes[0].element_distributes[index].sub_element_distributes[
            selectedFilter.indexSubDistribute
          ].price ?? min_price;
        quantityCurrent =
          distributes[0].element_distributes[index].sub_element_distributes[
            selectedFilter.indexSubDistribute
          ].quantity_in_stock ?? quantity_in_stock_with_distribute;
        value = distributes[0].element_distributes[index].name;
      } else {
        priceCurrent = min_price;
        quantityCurrent = quantity_in_stock_with_distribute;
        value = distributes[0].element_distributes[index].name;
      }

      setSelectedProduct((prev) => ({
        ...prev,
        value: value,
        price: priceCurrent,
        quantityInStock: quantityCurrent,
      }));
      return;
    }

    if (
      distributes[0].element_distributes[index].sub_element_distributes
        .length === 0
    ) {
      priceCurrent = distributes[0].element_distributes[index].price;
      quantityCurrent =
        distributes[0].element_distributes[index].quantity_in_stock;
      value = distributes[0].element_distributes[index].name;
      setSelectedProduct((prev) => ({
        ...prev,
        value: value,
        sub_element_distributes: "",
        price: priceCurrent ? priceCurrent : prev.price,
        quantityInStock: quantityCurrent,
      }));
    } else {
      value = distributes[0].element_distributes[index].name;
      setSelectedProduct((prev) => ({
        ...prev,
        value: value,
      }));
    }
  };

  const handleSelectSubdistribute = (index: number) => {
    setQuantity(1);
    setSelectedFilter((prev) => ({ ...prev, indexSubDistribute: index }));
    let priceCurrent = 0;
    let quantityCurrent = 0;
    let sub_element_distributes = "";

    if (selectedFilter.indexDistribute !== -1) {
      if (
        distributes[0].element_distributes[selectedFilter.indexDistribute]
          .sub_element_distributes.length > 0
      ) {
        priceCurrent =
          distributes[0].element_distributes[selectedFilter.indexDistribute]
            .sub_element_distributes[index].price;
        quantityCurrent =
          distributes[0].element_distributes[selectedFilter.indexDistribute]
            .sub_element_distributes[index].quantity_in_stock;
        sub_element_distributes =
          distributes[0].element_distributes[selectedFilter.indexDistribute]
            .sub_element_distributes[index].name;
      } else {
        priceCurrent = min_price;
        quantityCurrent = quantity_in_stock_with_distribute;
      }

      setSelectedProduct((prev) => ({
        ...prev,
        sub_element_distributes: sub_element_distributes,
        price: priceCurrent ? priceCurrent : prev.price,
        quantityInStock: quantityCurrent,
      }));
    }
  };

  //Handle Change Quanlity
  const onIncrease = () => {
    var maxQuantity = getMaxQuantity();

    if (distributes_selected !== null) {
      maxQuantity = getMaxQuantity(
        distributes_selected[0]?.value,
        distributes_selected[0]?.sub_element_distributes
      );
    }

    if (
      maxQuantity == -1 ||
      quantity + 1 <= maxQuantity ||
      check_inventory === false
    ) {
      setQuantity(quantity + 1);
    } else {
      alerts.error("Đã vượt quá số lượng trong kho!");
    }
  };
  const onReduce = () => {
    if (quantity - 1 >= 1) {
      setQuantity(quantity - 1);
    }
  };

  const handleChangeQuatity = (value: any) => {
    var maxQuantity = getMaxQuantity();

    if (distributes_selected !== null) {
      maxQuantity = getMaxQuantity(
        distributes_selected[0]?.value,
        distributes_selected[0]?.sub_element_distributes
      );
    }
    if (
      maxQuantity == -1 ||
      Number(value) <= maxQuantity ||
      check_inventory === false
    ) {
      setQuantity(value);
    } else {
      if (quantityInputRef.current !== value) {
        alerts.error("Đã vượt quá số lượng trong kho!");
        quantityInputRef.current = value;
      }
    }
  };
  const handleChangeDistribute = () => {
    // if (
    //   distributes_selected?.[0].value === selectedProduct.value &&
    //   distributes_selected?.[0].sub_element_distributes ===
    //     selectedProduct.sub_element_distributes
    // )
    //   return;
    const data = {
      line_item_id: item.id,
      product_id: product.id,
      quantity,
      distributes: [
        {
          name: distributes_selected[0]?.name ?? product.distributes[0]?.name,
          value: selectedProduct.value,
          sub_element_distributes: selectedProduct.sub_element_distributes,
        },
      ],
    };
    handleChangeBtnQuantity(data, () => {
      setShowDrawer(false);
    });
  };

  useEffect(() => {
    let priceCurrent = 0;
    let quantityCurrent = 0;
    let indexDistribute = -1;
    let indexSubDistribute = -1;

    if (distributes.length > 0 && distributes_selected.length > 0) {
      distributes[0].element_distributes?.map((distribute, index) => {
        if (distribute.name === distributes_selected[0].value) {
          priceCurrent = distribute.price;
          quantityCurrent = distribute.quantity_in_stock;
          indexDistribute = index;
          if (
            distributes_selected[0].sub_element_distributes &&
            distribute.sub_element_distributes?.length > 0
          ) {
            distribute.sub_element_distributes.map(
              (subDistribute, indexChild) => {
                if (
                  subDistribute.name ===
                  distributes_selected[0].sub_element_distributes
                ) {
                  priceCurrent = subDistribute.price;
                  quantityCurrent = subDistribute.quantity_in_stock;
                  indexSubDistribute = indexChild;
                }
              }
            );
          }
        }
      });
    }

    setSelectedProduct((prev) => ({
      ...prev,
      value: distributes_selected[0]?.value
        ? distributes_selected[0]?.value
        : "",
      sub_element_distributes: distributes_selected[0]?.sub_element_distributes
        ? distributes_selected[0]?.sub_element_distributes
        : "",
      price: priceCurrent ? priceCurrent : prev.price,
      quantityInStock: quantityCurrent,
    }));

    setSelectedFilter((prev) => ({
      ...prev,
      indexDistribute: indexDistribute,
      indexSubDistribute: indexSubDistribute,
    }));
  }, []);

  return (
    <Drawer
      placement={"bottom"}
      open={isShowDrawer}
      onClose={() => setShowDrawer(false)}
      height={"fit-content"}
      headerStyle={{ display: "none" }}
      bodyStyle={{ padding: 0 }}
    >
      <div className="flex gap-5 p-3 border-b-[1px] border-[#e4e4e4]">
        <img
          className="w-[70px] h-[70px] object-cover"
          src={image_url}
          alt={product.name}
        />
        <div className="flex flex-col justify-center">
          <div
            className="font-semibold text-base"
            style={{
              color: appTheme.color_main_1,
            }}
          >
            {selectedProduct.price > 0 ? (
              <>
                {before_discount_price > 0 && product_discount
                  ? `đ${formatNumber(
                      selectedProduct.price -
                        selectedProduct.price * product_discount.value * 0.01
                    )}`
                  : `đ${formatNumber(selectedProduct.price)}`}
              </>
            ) : (
              <>{item_price > 0 ? `đ${formatNumber(item_price)}` : "Liên hệ"}</>
            )}
          </div>
          {pastPrice !== price && before_discount_price > 0 && (
            <div className="flex gap-x-2">
              <div className="line-through text-xs text-slate-500">
                đ
                {selectedProduct.price > 0
                  ? formatNumber(selectedProduct.price)
                  : formatNumber(before_discount_price)}
              </div>
              <div className="text-xs text-red-400 font-medium">
                -{product_discount.value}%
              </div>
            </div>
          )}
        </div>
      </div>
      {distributes?.length > 0 && (
        <div className="p-3 border-b-[1px] border-[#e4e4e4]">
          <div className="flex flex-col gap-y-2">
            {distributes.map((distribute) => (
              <div key={distribute.name}>
                <div className="font-semibold mb-1">{distribute.name}</div>
                <div className="flex gap-x-2">
                  {distribute.element_distributes?.length > 0 &&
                    distribute.element_distributes.map(
                      (elementDistribute, index) => (
                        <div
                          key={elementDistribute.id}
                          className="bg-[#e9e9e9] inline-block px-[10px] py-1 relative overflow-hidden"
                          onClick={() => handleSelectedDistribute(index)}
                        >
                          <span>{elementDistribute.name}</span>
                          {selectedFilter.indexDistribute === index ? (
                            <div
                              className="absolute top-0 left-0 w-8 h-8 -translate-y-6 -translate-x-[10px]  -rotate-[30deg]"
                              style={{
                                backgroundColor: appTheme.color_main_1,
                              }}
                            >
                              <IconCheck
                                className={
                                  "w-[9px] h-[9px] absolute bottom-[1px] left-[5px] text-[#fff] rotate-[30deg]"
                                }
                              />
                            </div>
                          ) : null}
                        </div>
                      )
                    )}
                </div>
              </div>
            ))}

            {distributes != null &&
              distributes.length > 0 &&
              distributes[0] &&
              distributes[0].sub_element_distribute_name != null &&
              distributes[0].sub_element_distribute_name && (
                <div>
                  <div className="font-semibold mb-1">
                    {distributes[0].sub_element_distribute_name}
                  </div>
                  <div className="flex gap-x-2">
                    {distributes[0].element_distributes[0]
                      ?.sub_element_distributes.length > 0 &&
                      distributes[0].element_distributes[0]?.sub_element_distributes.map(
                        (subElementDistribute, indexChild) => (
                          <div
                            key={subElementDistribute.id}
                            className="bg-[#e9e9e9] inline-block px-[10px] py-1 relative overflow-hidden"
                            onClick={() =>
                              handleSelectSubdistribute(indexChild)
                            }
                          >
                            <span>{subElementDistribute.name}</span>
                            {selectedFilter.indexSubDistribute ===
                            indexChild ? (
                              <div
                                className="absolute top-0 left-0 w-8 h-8 -translate-y-6 -translate-x-[10px]  -rotate-[30deg]"
                                style={{
                                  backgroundColor: appTheme.color_main_1,
                                }}
                              >
                                <IconCheck
                                  className={
                                    "w-[9px] h-[9px] absolute bottom-[1px] left-[5px] text-[#fff] rotate-[30deg]"
                                  }
                                />
                              </div>
                            ) : null}
                          </div>
                        )
                      )}
                  </div>
                </div>
              )}
          </div>
        </div>
      )}

      <div className="flex justify-between  items-center p-5">
        <p>Số lượng</p>
        <div className="w-[110px] flex">
          <button
            className={`text-sm border border-[#d9d9d9] px-[11px] rounded-l-md text-center border-r-0 ${
              (product.check_inventory == false ||
                findStock(
                  product,
                  selectedProduct.value,
                  selectedProduct.sub_element_distributes
                ) === -1 ||
                findStock(
                  product,
                  selectedProduct.value,
                  selectedProduct.sub_element_distributes
                ) > 0) &&
              quantity !== 1
                ? "bg-[rgba(0,0,0,0.02)]"
                : "bg-[rgba(0,0,0,0.04)] text-[rgba(0,0,0,0.25)]"
            }`}
            disabled={
              (product.check_inventory == false ||
                findStock(
                  product,
                  selectedProduct.value,
                  selectedProduct.sub_element_distributes
                ) === -1 ||
                findStock(
                  product,
                  selectedProduct.value,
                  selectedProduct.sub_element_distributes
                ) > 0) &&
              quantity !== 1
                ? false
                : true
            }
            onClick={onReduce}
          >
            -
          </button>
          <InputNumber
            className="rounded-none text-center w-full inputNumber"
            value={quantity}
            onChange={handleChangeQuatity}
            min={1}
            disabled={
              product.check_inventory == false ||
              findStock(
                product,
                selectedProduct.value,
                selectedProduct.sub_element_distributes
              ) === -1 ||
              findStock(
                product,
                selectedProduct.value,
                selectedProduct.sub_element_distributes
              ) > 0
                ? false
                : true
            }
          />
          <button
            className={`text-sm border border-[#d9d9d9] px-[11px] rounded-r-md text-center ${
              product.check_inventory == false ||
              findStock(
                product,
                selectedProduct.value,
                selectedProduct.sub_element_distributes
              ) === -1 ||
              findStock(
                product,
                selectedProduct.value,
                selectedProduct.sub_element_distributes
              ) > 0
                ? "bg-[rgba(0,0,0,0.02)]"
                : "bg-[rgba(0,0,0,0.04)] text-[rgba(0,0,0,0.25)]"
            } border-l-0`}
            disabled={
              product.check_inventory == false ||
              findStock(
                product,
                selectedProduct.value,
                selectedProduct.sub_element_distributes
              ) === -1 ||
              findStock(
                product,
                selectedProduct.value,
                selectedProduct.sub_element_distributes
              ) > 0
                ? false
                : true
            }
            onClick={onIncrease}
          >
            +
          </button>
        </div>
      </div>
      {product.check_inventory == false ||
      findStock(
        product,
        selectedProduct.value,
        selectedProduct.sub_element_distributes
      ) === -1 ||
      findStock(
        product,
        selectedProduct.value,
        selectedProduct.sub_element_distributes
      ) > 0 ? (
        <Button
          className="w-[90%] mx-auto flex items-center justify-center py-4"
          type="primary"
          style={{
            backgroundColor: appTheme.color_main_1,
          }}
          onClick={handleChangeDistribute}
        >
          Mua ngay
        </Button>
      ) : (
        <Button
          className="w-[90%] mx-auto flex items-center justify-center py-4 bg-gray-300"
          isDefault
        >
          Hết hàng
        </Button>
      )}

      <button>
        <IconClose
          onClick={() => setShowDrawer(false)}
          className="absolute right-[10px] top-[10px] w-[24px] h-[24px]"
        />
      </button>
    </Drawer>
  );
}