import Select from 'react-select';

const DefaultIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="m6 9 6 6 6-6" />
    </svg>
);

function Dropdown({
    id = '_dropdown',
    data = [],
    title = 'Dropdown',
    text = 'Some long text will go here.',
    onChange = () => {},
    selected = '',
    isMulti = false,
    isOptionDisabled = () => { return false },
    icon = <DefaultIcon />,
    hint = ''
}) {
    const selectEl = React.useRef()

    React.useEffect(() => {
        new Choices(selectEl.current)
    },[])
    return (
        <div className="strb-offcanvas-option-item strb-d-flex strb-align-items-center strb-justify-content-between strb-flex-wrap">
            {icon && <span className="strb-oc-ico">{icon}</span>}
            <div className="strb-offcanvas-option-content">
                <h4 className="strb-offcanvas-option-title">{title}</h4>
                <p>{text}</p>
            </div>
            <div className="strb-offcanvas-option-action">
                <div className="strb-offcanvas-select strb-position-select strb-settings-option-select strb-common-select">
                    {isMulti? <Select
                        defaultValue={selected}
                        isMulti
                        isClearable
                        name="manual_products"
                        options={data}
                        onChange={onChange}
                        className="basic-multi-select"
                        classNamePrefix="select"
                        isOptionDisabled={isOptionDisabled}
                    /> :
                    <select ref={selectEl} name={id} onChange={onChange}>
                        { data.map( val => (
                            <option value={val.value} selected={ (val.value === selected)? true : false }>{val.label}</option>
                        )) }
                    </select>
                    }
                </div>
                {hint && <span className="strb-oc-hint">{hint}</span>}
            </div>
        </div>
    )
}

export default Dropdown