import React, { FC, useEffect, useState } from 'react';

import { Button } from 'antd';

import PricingDetails from './components/PricingDetails';
import BuyingOptions from './components/BuyingOptions';
import cx from "classnames";

import styles from './rightPane.module.scss';

const rightPane: FC<any> = ({ productDetails, getAnEnquiryClick, onBulkDiscountSelect, onBuyNowClick,addToBulkQuentity,stateArray }) => {
	const [scroll, setScroll] = useState(false);

	useEffect(() => {
 
		window.addEventListener("scroll", () => {
		  
		  setScroll(window.scrollY > 100);
		  if(window.scrollY > 100){
			// if(relatedRef.current?.scrollIntoView({ behavior: 'smooth' } )){
			//   setScroll(false)
			// }
			setScroll(window.scrollY < window.innerHeight);
		  }
		});
	  }, []);

	return (
		<div className={cx("w-4/12 m-4",styles.rightContainer)} style={{height:window.innerHeight*0.9}}>
			{/* <PricingDetails productDetails={productDetails} onBulkDiscountSelect={onBulkDiscountSelect} addToBulkQuentity={addToBulkQuentity}/> */}
			<BuyingOptions minimumOrderQuantity={productDetails?.moq} onBuyNowClick={onBuyNowClick} productDetails={productDetails} deliveryDetails={productDetails?.deliveryDetails || []} stateArray={stateArray}/>
			{/* <DeliveryDetails deliveryDetails={productDetails?.deliveryDetails || []} /> */}
			<Button className={styles.enquiryBtn} onClick={getAnEnquiryClick} >Enquiry Product Additional Information</Button>
			{/* <SupportDetails supportContactNo={productDetails?.supportContactNo || '8796782435'} /> */}
		</div>
	)
}

export default rightPane;