"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_select_1 = __importStar(require("react-select"));
const react_jss_1 = __importDefault(require("react-jss"));
const RoundPicture_1 = require("../RoundPicture");
const styles = {
    roundPicture: {
        marginRight: 12,
    },
};
const customStyles = {
    container: (provided, _state) => (Object.assign({}, provided, { minWidth: 200, height: 34 })),
    control: (provided, _state) => (Object.assign({}, provided, { borderRadius: 30, fontSize: 12, fontWeight: 500, border: '1px solid rgba(41, 41, 41, 0.1)', color: '#292929', backgroundColor: '#FFFFFF' })),
    menu: (provided, state) => (Object.assign({}, provided, { border: '1px solid #c9c9c9', boxShadow: '0 5px 10px 0 rgba(0, 0, 0, 0.12)', borderRadius: 10 })),
    option: (provided, state) => (Object.assign({}, provided, { display: 'flex', alignItems: 'center', fontSize: 12, padding: '5px 20px', color: state.isFocused ? 'white' : 'initial', backgroundColor: state.isFocused ? '#4f94f8' : 'initial' })),
    noOptionsMessage: (provided, state) => (Object.assign({}, provided, { fontSize: 12 })),
};
class SelectInputImpl extends react_1.default.Component {
    constructor(props) {
        super(props);
        this.handleChange = (selectedOption) => {
            this.setState({ selectedOption: '' });
            this.props.onChange(selectedOption);
        };
        this.renderOption = (componentProps) => {
            const { data } = componentProps;
            const { classes } = this.props;
            return (react_1.default.createElement(react_select_1.components.Option, Object.assign({}, componentProps),
                react_1.default.createElement(RoundPicture_1.RoundPicture, { className: classes.roundPicture, item: data, size: 22, borderColor: "transparent" }),
                react_1.default.createElement("div", null, data.label)));
        };
        this.renderNoOptionsMessage = (componentProps) => {
            const { classes, noOptionsMessage } = this.props;
            return (react_1.default.createElement(react_select_1.components.NoOptionsMessage, Object.assign({}, componentProps),
                react_1.default.createElement("p", null, noOptionsMessage || 'No options')));
        };
        this.state = {
            selectedOption: '',
        };
    }
    render() {
        const { className, options, placeholder } = this.props;
        const { selectedOption } = this.state;
        return (react_1.default.createElement(react_select_1.default, { className: className, placeholder: placeholder, value: selectedOption, onChange: this.handleChange, options: options, styles: customStyles, components: {
                Option: this.renderOption,
                NoOptionsMessage: this.renderNoOptionsMessage,
            } }));
    }
}
exports.SelectInput = react_jss_1.default(styles)(SelectInputImpl);
//# sourceMappingURL=index.js.map