import React, { FC, useContext, useEffect, useState } from "react";
import Link from "next/link";
import cx from "classnames";
import { Rate, Button, notification } from "antd";
import {
  CheckCircleFilled,
  PlusOutlined,
  MinusOutlined,
} from "@ant-design/icons";

import styles from "./productCard.module.scss";
import * as AddToCardApi from "../../../pages/api/addTocart";
import * as CartApi from "../../../pages/api/cart";
import { useRouter } from "next/router";
import _, { get } from "lodash";
import shopConetxt from "../../../context/shopConetxt";
import MobileHeader from "../../home/mobile/mobileHeader/MobileHeader";
import { baseUrl } from "../../../constants/urls";

const MobileView: FC<any> = ({ product, itemCount }) => {
  const {
    cart,
    setCartItems,
    setIsCartLoading,
    productQuantity,
    setProductQuantity,
  } = useContext(shopConetxt);
  const router = useRouter();
  const [loginRes, setLoginRes] = useState<any>({});
  const [productInvoice, setProductInvoice] = useState<any>({});
  const [isCartModalVisible, setIsCartModalVisble] = useState(false);
  const [isLoading,setIsLoading] = useState(false);
  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
  }, []);
  const addToCart = (product: any) => {
    setIsCartLoading(true);
    setProductQuantity({
      id: product.id,
      quantity: get(productQuantity, [product.id], 1),
    });
    const params = {
      product_id: product.id,
      quantity: get(productQuantity, [product.id], 1),
      token: loginRes?.token,
      vendor_id:product.vendor_id,
    };
    AddToCardApi.addToCart(params).then((res) => {
      notification.open({
        message: res?.message,
        duration: 1,
      });

      const tokenData: any = !_.isEmpty(loginRes) ? loginRes.token : null;
      CartApi.cartFetch(tokenData).then((cartRes) => {
        setIsCartLoading(false);
        if (cartRes.data !== null) {
          setProductInvoice(cartRes.data);
          setCartItems(cartRes.data);
          <MobileHeader item={cartRes.data.items.length} />;
        }
      });
    });
  };
  const decreaseCount = (prodct: any) => {
    if (get(productQuantity, [prodct.id], 1) > 1) {
      setProductQuantity({
        id: prodct.id,
        quantity: get(productQuantity, [prodct.id]) - 1,
      });
    }
  };
  const getCartQuantity = (productId: any) => {
    return get(productQuantity, [productId], 1);
  };

  const buyNow = (item: any) => {
    setIsCartLoading(true);
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    const params = {
      product_id: item.id,
      quantity: get(productQuantity, [item.id], 1),
      token: details?.token,
      vendor_id:item.vendor_id
    };
    AddToCardApi.addToCart(params).then((res) => {
      const tokenData: any = !_.isEmpty(loginRes) ? loginRes.token : null;
      CartApi.cartFetch(tokenData).then((cartRes) => {
        setIsCartLoading(false);
        if (cartRes.data !== null) {
          setProductInvoice(cartRes.data);
          setCartItems(cartRes.data);
          router.push("/cart");
        }
      });
    });
  };
  return (
    <div
      className={cx("m-4 flex justify-between items-center", styles.mobileCard)}
    >
      <Link href={`/products/details/${product.id}`}>
        <img
          src={`${baseUrl}/storage/${product?.base_image}`}
          className={cx(styles.mobileImage, "ml-3")}
        />
      </Link>

      <div className={styles.productDetailsMobile}>
        <Link href={`/products/details/${product.id}`}>
          <>
            <div className={styles.mobileCardDescription}>{product?.name}</div>
            <div className={cx("flex")}>
              <div className={cx(styles.description, "truncate")}>
                {product.brandLabel || " brand not found"}
              </div>
              <div
                className={cx(
                  styles.nameAndDescription,
                  "ml-1 flex items-center"
                )}
              >
                <CheckCircleFilled className={cx(styles.darkGreen, "mr-1")} />
                <div className={cx("text-green-900", styles.font10px)}>
                  Verified
                </div>
				
              </div>
            </div>
            <div className={cx("flex")}>
              <Rate
                disabled
                className={styles.rateComponent}
                allowHalf
                defaultValue={product?.reviews?.average_rating}
              />
              <div
                className={styles.reviewsLabel}
              >{`${product?.reviews?.total} Review (s)`}</div>
            </div>
            <div className="flex items-center">
              <div className={cx(styles.originalPrice, "mr-1 mt-1")}>
                {parseFloat(product?.regular_price).toFixed(2)}
              </div>
              <div className="flex items-center">
                <div className={styles.discountedPrice}>
                  {product.special_price === "" ||
                  product.special_price === null
                    ? null
                    : `₹${parseFloat(product?.special_price).toFixed(2)}`}
                </div>
                <div className={cx(styles.subDescription, "ml-2 mt-1")}>
                  Inc. of GST
                </div>
              </div>
            </div>
          </>
        </Link>
        <div className="flex items-center justify-between">
          <div
            className={cx("flex items-center mr-2", styles.itemCountWrapper)}
          >
            <Button
              size="middle"
              className={styles.plusMinusIcon}
              type="text"
              icon={<MinusOutlined />}
              onClick={() => decreaseCount(product)}
            />
            <div>{getCartQuantity(product.id)}</div>
            <Button
              size="middle"
              className={styles.plusMinusIcon}
              type="text"
              icon={<PlusOutlined />}
              onClick={() => addToCart(product)}
            />
          </div>
          <Button
            onClick={() => {
              addToCart(product);
            }}
            className={styles.addToCartBtn}
            size="middle"
            type="primary"
          >
            Add to Cart
          </Button>
        </div>
        <div>
          <Button
            size="middle"
            className={"mr-2 w-full mt-1"}
            type="primary"
            onClick={() => {
              buyNow(product);
            }}
          >
            Buy Now
          </Button>
        </div>
      </div>
    </div>
  );
};

export default MobileView;