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


import ProductImage from './components/ProductImage';
import ProductDetails from './components/ProductDetails';
import ProductDescription from './components/ProductDescription';
import RelatedProdcuts from './components/RelatedProdcuts';
import Reviews from './components/Reviews';
import FAQs from './components/FAQs';

import {
	FacebookShareButton,
	FacebookIcon,
	WhatsappShareButton,
	WhatsappIcon,
	TwitterShareButton,
	TwitterIcon,
} from 'next-share';
import cx from "classnames";
import {
	UploadOutlined,
	LinkOutlined
} from "@ant-design/icons";
import styles from './leftPane.module.scss';
import Breadcrumbs from './components/Breadcrumbs';

import { Dropdown, Image, Menu, MenuProps, notification } from 'antd';


const LeftPane: FC<any> = ({ productDetails, relatedProducts, requestCallback, productAdditionalInfo, review, stateArray,attrabuteSelection,configurableProducts }) => {
	const ratingRef = useRef<null | HTMLDivElement>(null);
	const relatedRef = useRef<null | HTMLDivElement>(null);

	const onViewAllOffersClick = () => {
		console.log("View all offers");
	}
	useEffect(() => {

		if (review === "reviews") {

			ratingRef.current?.scrollIntoView({ behavior: 'smooth' });
		}
	}, [review])

	const handleRatingsClick = () => {
		ratingRef.current?.scrollIntoView({ behavior: 'smooth' });
	}

	const onProductCatalogClick = () => {
		console.log("onProductCatalogClick");
	}


	const onViewAllFAQClick = () => {
		console.log("view all FAQs");
	}

	const copyToClipboard = (e: any) => {

		navigator.clipboard.writeText(window.location.toString())
		notification.success({ message: "Link Copied" });
	}

	const profileData: MenuProps["onClick"] = (e: any) => {


	}
	const userMenu = (
		<Menu
			onClick={profileData}
			items={[
				{
					key: "1",
					label: (
						<FacebookShareButton url={window.location.toString()}
							quote={'Indispare Product Share Url.'}
							hashtag={'#indispare'}>
							Facebook
						</FacebookShareButton>
					),
					icon: (
						<FacebookShareButton
							url={window.location.toString()}
							quote={'Indispare Product Share Url.'}
							hashtag={'#indispare'}

						>
							<FacebookIcon size={32} round />
						</FacebookShareButton>
					),
					className: styles.labelData,
				},
				{
					key: "2",
					label: (<WhatsappShareButton
						url={window.location.toString()}
						title={'Indispare Product Share Url'}
						separator=":: "
					>Whatsapp</WhatsappShareButton>),
					icon: (
						<WhatsappShareButton
							url={window.location.toString()}
							title={'Indispare Product Share Url'}
							separator=":: "
						>
							<WhatsappIcon size={32} round />
						</WhatsappShareButton>
					),
					className: styles.labelData,
				},
				{
					key: "3",
					label: <TwitterShareButton
						url={window.location.toString()}
						title={'Indispare Product Share Url'}
					>Twitter</TwitterShareButton>,
					icon: (
						<TwitterShareButton
							url={window.location.toString()}
							title={'Indispare Product Share Url'}
						>
							<TwitterIcon size={32} round />
						</TwitterShareButton>
					),
					className: styles.labelData,
				},
				{
					key: "4",
					label: <div onClick={copyToClipboard}>Copy Link</div>,
					icon: (
						<LinkOutlined style={{ fontSize: "32px" }} />
					),
					className: styles.labelData,
				},

			]} />)

	return (
		<div className={cx("w-8/12 my-4 bg-white rounded-md ml-4", styles.leftContainer)}>
			<div className='p-3 ant-row justify-between'>
				<div className='ant-col ant-col-xl-22'>
					<Breadcrumbs />
				</div>
				<div className='ant-col ant-col-xl-2 ant-row'>
					<Dropdown
						overlay={userMenu}
						className={cx(styles.dropdownParent)}
						trigger={["click"]}
					>
						<a onClick={(e) => e.preventDefault()}>
							<Image src={"/images/shareApple.png"} preview={false} className={styles.imgICon} />

						</a>
					</Dropdown>



				</div>

			</div>

			<div className={styles.imageAndDescription}>
				<ProductImage images={productDetails?.images} productDetails={productDetails} relatedRef={relatedRef} stateArray={stateArray} />

				<ProductDetails
					review={review}
					productDetails={productDetails}
					onViewAllOffersClick={onViewAllOffersClick}
					onRatingsClick={handleRatingsClick}
					productAdditionalInfo={productAdditionalInfo}
					requestCallback={requestCallback}
					relatedRef={relatedRef}
					stateArray={stateArray}
					attrabuteSelection={attrabuteSelection}
					configurableProducts={configurableProducts}
				/>

			</div>

			{relatedProducts?.length>0?<RelatedProdcuts relatedProducts={relatedProducts} relatedRef={relatedRef} />:null}
			{productDetails?.reviews?.all_reviews.length>0?<Reviews ratingRef={ratingRef} userReviews={productDetails?.reviews || []} />:null}
			<FAQs faqs={productDetails?.faqs} onViewAllFAQClick={onViewAllFAQClick} />
		</div>
	)
}

export default LeftPane;