import React from 'react';
import ReactSelect from 'react-select';
import PropTypes from 'prop-types';
import InputCheckbox from '../InputCheckbox';
import defaultStyles from '../../styles/reactSelect/styles';
import './styles.scss';

const CustomOption = ({innerProps, label, isSelected}) => {
    return (
        <div className="CustomOption">
            <InputCheckbox
                elementId={innerProps.id}
                label={label}
                isChecked={isSelected}
                onChange={innerProps.onClick}
            />
        </div>
    );
};

CustomOption.propTypes = {
    innerProps: PropTypes.object.isRequired,
    label: PropTypes.string.isRequired,
    isSelected: PropTypes.bool.isRequired,
};

const CustomMultiValue = ({data}) => {
    return <div className="CustomMultiValue">{data.label}</div>;
};

CustomMultiValue.propTypes = {
    data: PropTypes.object.isRequired,
};

const CustomPlaceholder = () => {
    return <div className="CustomPlaceholder">Target to all</div>;
};

const CustomStyles = {
    ...defaultStyles,
    control: (styles, {isFocused, isDisabled}) => ({
        ...styles,
        backgroundColor: isDisabled ? '#ededed' : '#fff',
        maxHeight: '32px',
        minHeight: '32px',
        borderWidth: 1,
        boxShadow: 'none',
        borderColor: isFocused ? '#007bff' : '#c0c0c0',
    }),
    valueContainer: (styles) => {
        return {
            ...styles,
            display: 'flex',
            flexDirection: 'row',
            flexWrap: 'nowrap',
            overflow: 'hidden',
        };
    },
    dropdownIndicator: (styles) => {
        return {
            ...styles,
        };
    },
    menu: (styles) => {
        return {
            ...styles,
            margin: 0,
            borderRadius: 0,
            zIndex: 10,
            paddingTop: '6px',
            paddingBottom: '6px',
        };
    },
};

function MultiSelect(props) {
    const config = {
        ...props,
        id: props.elementId,
        onChange: props.onChange,
        styles: CustomStyles,
        components: {
            Option: CustomOption,
            MultiValue: CustomMultiValue,
            Placeholder: CustomPlaceholder,
        },
    };

    return (
        <ReactSelect
            {...config}
            options={props.options}
        />
    );
}

MultiSelect.propTypes = {
    options: PropTypes.array.isRequired,
    customStyles: PropTypes.object,
    isClearable: PropTypes.bool,
    isDisabled: PropTypes.bool,
    isLoading: PropTypes.bool,
    isRtl: PropTypes.bool,
    isMulti: PropTypes.bool,
    isSearchable: PropTypes.bool,
    closeMenuOnSelect: PropTypes.bool,
    backspaceRemovesValue: PropTypes.bool,
    hideSelectedOptions: PropTypes.bool,
    elementId: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
};

MultiSelect.defaultProps = {
    isClearable: true,
    isDisabled: false,
    isLoading: false,
    isRtl: false,
    isMulti: true,
    isSearchable: true,
    closeMenuOnSelect: false,
    hideSelectedOptions: false,
    backspaceRemovesValue: false,
    customStyles: {},
};

export default MultiSelect;