/* eslint-disable no-console, react/prop-types */
import React from 'react';
import Combobox from '~/components/combobox';
import Checkbox from '~/components/checkbox';
import Icon from '~/components/icon';
import comboboxFilterAndLimit from '~/components/combobox/filter';
import IconSettings from '~/components/icon-settings';

const accounts = [
	{
		id: '1',
		label: 'Acme',
		subTitle: 'Account • San Francisco',
		type: 'account',
	},
	{
		id: '2',
		label: 'Salesforce.com, Inc.',
		subTitle: 'Account • San Francisco',
		type: 'account',
	},
	{
		id: '3',
		label: "Paddy's Pub",
		subTitle: 'Account • Boston, MA',
		type: 'account',
	},
	{
		id: '4',
		label: 'Tyrell Corp',
		subTitle: 'Account • San Francisco, CA',
		type: 'account',
	},
	{
		id: '5',
		label: 'Paper St. Soap Company',
		subTitle: 'Account • Beloit, WI',
		type: 'account',
	},
	{
		id: '6',
		label: 'Nakatomi Investments',
		subTitle: 'Account • Chicago, IL',
		type: 'account',
	},
	{ id: '7', label: 'Acme Landscaping', subTitle: '\u00A0', type: 'account' },
	{
		id: '8',
		label: 'Acme Construction',
		subTitle: 'Account • Grand Marais, MN',
		type: 'account',
	},
];


class Example extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			inputValue: '',
			selection: [],
			checked: [],
		};
    }
    
    getIsChecked(id) {
		let isChecked = false;
		const checkedIndex = this.state.checked.findIndex(
			(el) => el.id === id
		);
		if (checkedIndex > -1) isChecked = true;
		return isChecked;
    }

    handleCheckboxChange(targetChecked, elemID) {
		const { checked } = this.state;
		if (targetChecked) {
			checked.push({
				id: elemID,
			});
		} else {
			const valueIndex = checked.findIndex((el) => el.id === elemID);
			checked.splice(valueIndex, 1);
		}

		this.setState({ checked });
		console.log(this.state.checked);
	}

	render() {
		return (
			<IconSettings iconPath="/assets/icons">
				<Combobox
					id="combobox-base"
					disabled={this.props.disabled}
					events={{
						onChange: (event, { value }) => {
							if (this.props.action) {
								this.props.action('onChange')(event, value);
							} else if (console) {
								console.log('onChange', event, value);
							}
							this.setState({ inputValue: value });
						},
						onRequestRemoveSelectedOption: (event, data) => {
							this.handleCheckboxChange(false, data.removedOption.id);
							this.setState({
								inputValue: '',
								selection: data.selection,
							});
						},
						onSubmit: (event, { value }) => {
							if (this.props.action) {
								this.props.action('onChange')(event, value);
							} else if (console) {
								console.log('onChange', event, value);
							}
							this.setState({
								inputValue: '',
								selection: [
									...this.state.selection,
									{
										label: value,
										icon: (
											<Icon
												assistiveText={{ label: 'Account' }}
												category="standard"
												name="account"
											/>
										),
									},
								],
							});
						},
						onSelect: (event, data) => {
							console.log('data', data);
							if (this.props.action) {
								this.props.action('onSelect')(
									event,
									...Object.keys(data).map((key) => data[key])
								);
							} else if (console) {
								console.log('onSelect', event, data);
							}
							this.handleCheckboxChange(data.checked, data.lastSelectedOption.id);
							this.setState({
								selection: data.selection,
							});
						},
						handleClearSearchText: (event, data) => {
							this.setState({
								inputValue: ''
							});
						},
					}}
					labels={{
						label: 'Search',
						placeholder: 'Search Salesforce',
					}}
					multiple
					options={comboboxFilterAndLimit({
						inputValue: this.state.inputValue,
						limit: 10,
						options: accounts.map((elem, index) => ({
							...elem,
							...{
								icon: (
									<input
										type="checkbox"
										checked={this.getIsChecked(elem.id)}
										id={`checkbox-${index}`}
										name={elem.type}
										key={`checkbox-${index + 1}`}
										// onChange={(e, { checked }) => {
										// 	this.handleCheckboxChange(
										// 		checked,
										// 		elem.id
										// 	);
										// }}
									/>
								),
							},
						})),
                        selection: this.state.selection,
                        keepOptionOnSelect: true,
					})}
					menuItemVisibleLength={5}
					selection={this.state.selection}
                    value={this.state.inputValue}
					keepOpenOnSelect
					omitIconInSelection
					considerSelectionFromProps
				/>
			</IconSettings>
		);
	}
}

Example.displayName = 'Base-Multiselect';
export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
