import { FC, useEffect, useState } from "react";
import cx from "classnames"
import styles from "./productNotFound.module.scss";
import { Button, Image } from "antd";
import { useRouter } from "next/router";
import _ from "lodash";
import OTPModal from "../../modal/otpModal/OTPModal";

const ProductNotFound: FC<any> = (props: any) => {
    const router = useRouter();
    const [loginRes, setLoginRes] = useState<any>({});
    const [isOTPModalVisible, setIsOTPModalVisible] = useState(false);

    useEffect(()=>{
        const val: any = localStorage.getItem("loginDetails");
		const loginDetails = JSON.parse(val);
		const cityPincode: any = localStorage.getItem("PinCode");
		// console.log(cityPincode, "cityPincode");

		setLoginRes(loginDetails);
    },[])
    const rfqRoute=()=>{
        if (_.isEmpty(loginRes)) {
            setIsOTPModalVisible(!isOTPModalVisible);
        }else {
            router.push(
                {
                    pathname: `/rfq`
                },

            );
        }
    }

    console.log(localStorage.getItem("WithoutProduct"), "props?.productName");
return(
    <>
    {/* <div className={cx("ant-row ", styles.noResultSection,styles.mlDiv)}>
        <div className="ant-col ant-col-xl-18 ant-col-md-12 ant-col-xs-24">
            <div className={styles.enquiryTitle}>Oops! No products found.  </div>
            <div className={styles.enquirySubTitle}>No worries, We're here to serve.</div>
            <div className={styles.subChildTitle}>Raise a Request for Quotation (RFQ), and we'll ensure you receive <br/> your desired items promptly.</div>
            <div className="ant-col ant-col-xl-12 ant-col-md-24 ant-col-xs-24">
                <Button type="primary" onClick={rfqRoute}>SEND RFQ</Button>
                <Button type="primary" ghost className={styles.buttonMargin} onClick={()=>router.push("/home")}>GO TO HOME</Button>
            </div>
        </div>
        <div className="ant-col ant-col-xl-6 ant-col-md-12 ant-col-xs-0 ">
            <div className={styles.imgMargin}>
            <Image src={"/images/product.png"} preview={false}/>
            </div>
        </div>
    </div> */}
    <div className={cx("ant-row ", styles.noResultSection, styles.mlDiv)}>
  <div className="ant-col ant-col-xl-18 ant-col-md-12 ant-col-xs-24">
    <div className={styles.enquiryTitle}>
      Looking for “{localStorage.getItem("WithoutProduct") || "Product"}”?
    </div>

    <div className={styles.enquirySubTitle}>
      Please submit an RFQ and we’ll send the best quote.
    </div>

    <div className={styles.subChildTitle}>
      We’ll work to secure the best price and fastest delivery for you.
    </div>

    <div className="ant-col ant-col-xl-12 ant-col-md-24 ant-col-xs-24">

      {/* Send RFQ */}
      <Button type="primary" onClick={rfqRoute}>
        SEND RFQ
      </Button>

      {/* Instant RFQ via WhatsApp */}
      <Button
        type="primary"
        ghost
        className={styles.buttonMargin}
        onClick={() =>
          window.open(`https://wa.me/9515665897?text=Looking for ${localStorage.getItem("WithoutProduct") || "Product"}`, "_blank")
        }
      >
        INSTANT RFQ VIA WHATSAPP
      </Button>

      {/* Keep Browsing */}
      <Button
        type="default"
        className={styles.buttonMargin}
        onClick={() => router.push("/home")}
      >
        KEEP BROWSING
      </Button>
    </div>
  </div>

  <div className="ant-col ant-col-xl-6 ant-col-md-12 ant-col-xs-0">
    <div className={styles.imgMargin}>
      <Image src={"/images/product.png"} preview={false} />
    </div>
  </div>
</div>
    <OTPModal
				page={"productList"}
				stateArray={props?.stateArray}
				handleOTPClose={() => {
					setIsOTPModalVisible(false);
				}}
				isOTPModalVisible={isOTPModalVisible}
			/>
    </>
)
}

export default ProductNotFound;