import * as React from 'react';
import {useEffect} from 'react';
import Select from "react-dropdown-select";

function SelectBox({options, label = "Select", setValuesOutside, tags}) {
    const [values, setValues] = React.useState([]);
    const [opts, setOpts] = React.useState([]);

    useEffect(() => {
        setOpts(options.map(opt => ({...opt, group: label})));
    }, [options, label]);

    useEffect(() => {
        setValues(tags.filter(tag => tag.group === label));
    }, [tags, label]);

    const customContentRenderer = ({state}) => {
        return <div
            className="selectbox__content">{label} {state.values.length ? `(${state.values.length})` : null}</div>
    }

    const customDropdownRenderer = (s) => {
        const {state, methods, props} = s;
        const regexp = new RegExp(state.search, 'i');

        return <div className="selectbox__dropdown">
            {options.length > 6
                ? <input type="text"
                         className="selectbox__input"
                         value={state.search}
                         onChange={methods.setSearch}
                         placeholder="Search"
                />
                : null}
            <div className="selectbox__options">
                {opts
                    .filter((item) => regexp.test(item[props.searchBy] || item[props.labelField]))
                    .map((option) => {
                        return (
                            <div
                                className="selectbox__option"
                                key={option.value}
                                onClick={option.disabled ? null : () => methods.addItem(option)}>
                                <input
                                    type="checkbox"
                                    className="selectbox__dropdown-checkbox checkbox"
                                    onChange={() => state.values.indexOf(option) !== -1 ? methods.addItem(option) : methods.removeItem(null, option, false)}
                                    checked={state.values.indexOf(option) !== -1}
                                />
                                <label className="selectbox__dropdown-label">{option.label}</label>
                            </div>
                        );
                    })}
                {opts.filter((item) => regexp.test(item[props.searchBy] || item[props.labelField])).length
                    ? null
                    : <span className="selectbox__dropdown-label">No Data Found</span>
                }
            </div>
        </div>
    }

    return <Select
        className={`selectbox ${values.length ? "selectbox--active" : null}`}
        options={options}
        multi={true}
        values={values}
        onChange={(values) => {
            setValuesOutside(values.length ? values.map(item => ({...item, group: label})) : [{group: label}])
        }}
        contentRenderer={customContentRenderer}
        dropdownRenderer={customDropdownRenderer}
    />
}

export default SelectBox;
