import React, { FC, useState } from 'react';
import cx from 'classnames';

import { Collapse, Dropdown, Table, Radio, Button } from 'antd';
import {  DownOutlined, UpOutlined } from "@ant-design/icons";

import styles from './commonStyles.module.scss';
import {
	ShoppingCartOutlined
} from "@ant-design/icons";

const BulkQuantityDiscount: FC<any> = ({ onBulkDiscountSelect, bulkQuantityDiscount, isMobile, addToBulkQuentity }) => {
	const [selectedBulkDiscount, setSelectedBulkDiscount] = useState<any>();
	const [visible, setVisible] = useState(false)

	const onDiscountSelect = (rowData: any) => (event: any) => {

		onBulkDiscountSelect(rowData);
		setSelectedBulkDiscount(rowData);
	}

	const onDiscountSelect1 = (rowData: any) => {

		onBulkDiscountSelect(rowData);
		setSelectedBulkDiscount(rowData);
	}

	const stopPropagation = (event: any) => {
		event.stopPropagation();
	}
	const columns = [
		// {
		// 	title: 'Select',
		// 	dataIndex: 'isSelected',
		// 	key: 'isSelected',
		// 	render: (...rest: any) => {
		// 		const [data, rowData] = rest;
		// 		return (
		// 			<div onClick={stopPropagation}
		// 			>
		// 				<Radio
		// 					onChange={onDiscountSelect(rowData)}
		// 					checked={selectedBulkDiscount?.discount === rowData?.discount}
		// 				/>
		// 			</div>
		// 		)
		// 	}
		// },
		{
			title: 'Quantity',
			dataIndex: 'quantity',
			key: 'quantity',
			render:(...rest: any)=>{
				const [data, rowData] = rest;

				return (
					<div className='flex items-center justify-center'>{rowData.quantity}+ </div>
				)
			}
			
		},
		{
			title: 'Discount',
			dataIndex: 'discount',
			key: 'discount',
			render:(...rest: any)=>{
				const [data, rowData] = rest;

				return (
					<div className='flex items-center justify-center'>{rowData.discount}%</div>
				)
			}
		},
		{
			title: 'Price per piece',
			dataIndex: 'bulk_price',
			key: 'bulk_price',
			render:(...rest: any)=>{
				const [data, rowData] = rest;

				return (
					<div className='flex items-center justify-center'>{rowData.bulk_price}</div>
				)
			}
		},
		{
			title: 'Action',
			dataIndex: 'onClick',
			key: 'onClick',
			render: (...rest: any) => {
				const [data, rowData] = rest;

				return (
					<div 
					style={{width:"60px",display:"flex",alignItems:"center",justifyContent:"center"}}
					>
						<a onClick={() => {
							onDiscountSelect1(rowData);
							addToBulkQuentity(rowData);
							// setVisible(!visible)

						}}

						>
							<ShoppingCartOutlined className={styles.buttonsCartButton} />
						</a>
						<Button></Button>
					</div>
				)
			}

		},

	];

	const getOverlayContent = () => {
		return (
			<div style={{ zIndex: 9999 }} >
				<Table
					size="small"
					columns={columns}
					dataSource={bulkQuantityDiscount}
					pagination={{ hideOnSinglePage: true }}
					rowKey="quantity"
				/>
			</div>
		);
	}

	return isMobile ?
		<div className="mt-4 ">
			<Collapse >
				<Collapse.Panel header={<div className={styles.boldText}>Bulk Quantity Discounts!</div>} key="1">
					{getOverlayContent()}
				</Collapse.Panel>
			</Collapse>
		</div > :
		<div className='mt-4'>
			<Dropdown overlay={getOverlayContent()} trigger={["click"]} >
				<a onClick={() => { setVisible(!visible) }}>
					<div className={cx("flex justify-between py-2 px-4 align-center", styles.bulkQuantityTrigger)}>
						<div className={styles.triggerLabel}>Bulk Quantity Discounts!</div>
						{visible ? <UpOutlined height="14px" className={styles.dropDownIcon} /> : <DownOutlined height="14px" className={styles.dropDownIcon} />}
					</div>
				</a>
			</Dropdown>
		</div>
}

export default BulkQuantityDiscount;