import React, {FC} from 'react';
import { Checkbox } from '../../Checkbox';

interface ExtraOptionsProps {
	selectProps: any,
	selectedOptions: any,
	label: string,
	value: any,
	id?: string,
	//id: string,
	style?: React.CSSProperties
	onChange: (value: any) => void,
}

const ExtraOptions: FC<ExtraOptionsProps> = ({
	selectProps,
	selectedOptions,
	label,
	value,
	id,
	//id,
	style,
	onChange,
}) => {
	return (
		<div className="gtc-rc-extra-option" style={style}>
			<div style={{ marginBottom: 10, fontSize: "14px", fontWeight: 700 }}>{label}</div>
				<div style={{display: "flex"}}>
					{selectProps.extraOptions.map((extraOption:any, index:number) => {
						const cbKey = Math.floor(Math.random() * 100000)
						return (
							<div key={`${id}--${index}`} style={{paddingRight: "12px"}}>
								<Checkbox
									id={`${id}-${extraOption[selectProps.extraOptionsvalueField]}`+index}
									checked={
										selectedOptions[value]
											? !!selectedOptions[value].find(
													(option:any) =>
														option[selectProps.extraOptionsvalueField] ===
														extraOption[selectProps.extraOptionsvalueField],
											  )
											: false
									}
									onChange={(checked: boolean) => {		

										let newSelectedOptions = { ...selectedOptions };
                                        
										if (!newSelectedOptions[value]) {
											newSelectedOptions[value] = [];
										}

										if (checked) {
											newSelectedOptions[value].push(extraOption);
										} else {
											newSelectedOptions[value] = newSelectedOptions[value].filter(
												(option:any) =>
													option[selectProps.extraOptionsvalueField] !=
													extraOption[selectProps.extraOptionsvalueField],
											);
										}

										onChange(newSelectedOptions);									
                                       
									}}
									label={extraOption[selectProps.extraOptionstextField]}
								/>
							</div>
						);
					})}

				</div>
			
		</div>
	);
};

export default ExtraOptions;
