import React, { useState, FC, useContext, useEffect } from 'react';
import { Radio, Space } from 'antd';
import cx from 'classnames';

import Label from '../../../common/label';
import shopConetxt from '../../../../context/shopConetxt';
import styles from '../rightPane.module.scss';
import ProductOffers from '../../leftPane/components/ProductOffers';

const DeliveryDetails: FC<any> = ({ deliveryDetailsList = [] }) => {
	const {
		setDeliveryPriceDetails,
    deliveryPriceDetails
	  } = useContext(shopConetxt);
	const {deliveryOptions } = useContext(shopConetxt)
	const [selectedDeliveryDetails, setSelectedDeliveryDetails] = useState(0)

	const onChange = (event: any) => {
		localStorage.setItem("DeliveryAvailability",event.target.value);
		setSelectedDeliveryDetails(event.target.value)
	}
	

	useEffect(() => {
	
		
	}, [deliveryPriceDetails])
	

	return (
		<div className={cx("h-44 bg-white rounded-md", styles.deliveryDetailsWrapper)}>
			<Radio.Group onChange={onChange} value={selectedDeliveryDetails}>
				<Space direction="vertical">
					{deliveryOptions && deliveryOptions.map((deliveryDetails: any, index: number) => (<Radio key={index} value={index}>
						<div className={styles.deliveryDetails}>{deliveryDetails?.label}</div>
						<Label label={deliveryDetails?.timing} />
					</Radio>))}
				</Space>
			</Radio.Group>

			
		</div>
	)
}

export default DeliveryDetails