"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 jss_1 = require("../../jss");
const RoundPicture_1 = require("../RoundPicture");
const styles = {
    roundPicture: {
        marginRight: 12,
    },
    header: {
        display: 'flex',
        justifyContent: 'space-between',
    },
    label: Object.assign({ display: 'block', margin: [0, 0, 8, 5] }, jss_1.theme.fontMixin(12), { color: (({ error }) => error ? jss_1.theme.colors.error : jss_1.theme.colors.gray.middle) }),
    error: Object.assign({}, jss_1.theme.fontMixin(10, 'bold'), { color: jss_1.theme.colors.error, textAlign: 'right', padding: [0, 5, 8, 10] }),
    select: {
        '& > div': {
            border: (({ error }) => error ? `2px solid ${jss_1.theme.colors.error} !important` : '1px solid rgba(41, 41, 41, 0.1)'),
            color: (({ error }) => error ? jss_1.theme.colors.error : '#292929'),
        },
    },
};
const customStyles = {
    container: (provided, _state) => (Object.assign({}, provided, { minWidth: 200, padding: 2 })),
    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', cursor: 'pointer' })),
    indicatorSeparator: (provided, _state) => (Object.assign({}, provided, { backgroundColor: '#3070cd' })),
    indicatorsContainer: (provided, _state) => (Object.assign({}, provided, { borderRadius: '0 30px 30px 0', backgroundColor: '#3070cd' })),
    dropdownIndicator: (provided, _state) => (Object.assign({}, provided, { color: 'white !important' })),
    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', cursor: 'pointer', 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) => {
            if (!selectedOption || Array.isArray(selectedOption))
                return;
            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),
                data.picture &&
                    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')));
        };
    }
    renderHeader() {
        const { classes, label, error, forceHeader } = this.props;
        if (!forceHeader && !label && !error)
            return null;
        return (react_1.default.createElement("div", { className: classes.header },
            label
                ? react_1.default.createElement("label", { className: classes.label }, label)
                : react_1.default.createElement("label", { className: classes.label }, "\u00A0"),
            error &&
                react_1.default.createElement("span", { className: classes.error }, error)));
    }
    render() {
        const { classes, className, options, placeholder, value } = this.props;
        return (react_1.default.createElement("div", { className: className },
            this.renderHeader(),
            react_1.default.createElement(react_select_1.default, { className: classes.select, placeholder: placeholder, value: value, 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