"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 classnames_1 = __importDefault(require("classnames"));
const React = __importStar(require("react"));
const react_jss_1 = __importDefault(require("react-jss"));
const types_1 = require("../../types");
const Button_1 = require("../Button");
var ChooserItemStyle;
(function (ChooserItemStyle) {
    ChooserItemStyle[ChooserItemStyle["PRIMARY"] = 0] = "PRIMARY";
    ChooserItemStyle[ChooserItemStyle["SECONDARY"] = 1] = "SECONDARY";
})(ChooserItemStyle = exports.ChooserItemStyle || (exports.ChooserItemStyle = {}));
const styles = (theme) => types_1.createStyles({
    chooserItem: Object.assign({ margin: '10px auto 10px', position: 'relative', display: 'flex', verticalAlign: 'middle', justifyContent: 'space-between', border: `1px solid ${theme.colors.gray.light}`, borderRadius: theme.$borderRadius, padding: 10, minWidth: '180px' }, theme.fontMixin(13), { '&:hover': {
            backgroundColor: theme.colors.gray.light,
        } }),
    info: {
        marginRight: '15px',
    },
    title: {
        margin: 'auto',
        fontWeight: 500,
    },
    description: {
        color: theme.colors.gray.middle,
    },
    chooserPrimary: {},
    chooserSecondary: {
        border: 0,
        backgroundColor: 'rgba(255,255,255, 0.1)',
        '&:hover': {
            backgroundColor: 'rgba(255,255,255, 0.2)',
        },
        '& description': {
            color: theme.colors.gray.light,
        },
    },
});
class ChooserItemImpl extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.handleClickSelect = () => {
            const { onSelect, item } = this.props;
            onSelect(item.value);
        };
    }
    render() {
        const { classes, style, item, selectText } = this.props;
        const styleClassNames = {
            [ChooserItemStyle.PRIMARY]: classes.chooserPrimary,
            [ChooserItemStyle.SECONDARY]: classes.chooserSecondary,
        };
        return (React.createElement("div", { className: classnames_1.default(classes.chooserItem, styleClassNames[style]) },
            React.createElement("div", { className: classes.info },
                React.createElement("p", { className: classes.title }, item.title),
                item.description &&
                    React.createElement("small", { className: classes.description }, item.description)),
            React.createElement(Button_1.Button, { onClick: this.handleClickSelect, btnStyle: style === ChooserItemStyle.SECONDARY ? Button_1.Style.SECONDARY : Button_1.Style.PRIMARY, btnSize: Button_1.Size.SMALL }, selectText || 'Select')));
    }
}
ChooserItemImpl.defaultProps = {
    style: ChooserItemStyle.PRIMARY,
    implicit: true,
};
exports.ChooserItem = react_jss_1.default(styles)(ChooserItemImpl);
//# sourceMappingURL=index.js.map