"use strict";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Icon_1 = require("../Icon");
const React = __importStar(require("react"));
const react_jss_1 = __importDefault(require("react-jss"));
const types_1 = require("../../types");
const jss_1 = require("../../jss");
var ServiceActionType;
(function (ServiceActionType) {
    ServiceActionType["Add"] = "Add";
    ServiceActionType["Settings"] = "Settings";
    ServiceActionType["Remove"] = "Remove";
})(ServiceActionType = exports.ServiceActionType || (exports.ServiceActionType = {}));
const ServiceActionButtonIconMap = {
    [ServiceActionType.Add]: Icon_1.IconSymbol.PLUS,
    [ServiceActionType.Settings]: Icon_1.IconSymbol.COG,
    [ServiceActionType.Remove]: Icon_1.IconSymbol.CROSS,
};
const styles = (theme) => types_1.createStyles({
    container: {
        flex: 0,
        display: 'inline-flex',
        color: 'rgb(38, 33, 33)',
        alignItems: 'center',
        width: (({ alternate }) => alternate ? null : 195),
        margin: '0 7px 10px 0',
        padding: (({ alternate }) => alternate ? '0px 5px 10px 0' : 10),
        backgroundColor: 'transparent',
        borderRadius: '999px',
        transition: '200ms',
        userSelect: 'none',
        '&:hover': {
            backgroundColor: ({ alternate }) => alternate ? 'none' : '#EEE',
        },
    },
    iconContainer: {
        margin: '0 10px 0 0',
        position: 'relative',
        width: '30px',
        height: '30px',
    },
    serviceDetails: {
        flexGrow: 1,
        width: '130px',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        '& small': {
            fontSize: '10px',
            fontStyle: 'italic',
        },
    },
    serviceName: {
        display: 'inline-block',
        fontSize: '12px',
        fontWeight: 600,
    },
    icon: {
        display: 'inline-block',
        borderRadius: '50%',
        width: 30,
    },
    iconPin: Object.assign({}, theme.mixins.flexbox.containerCenter, { position: 'absolute', bottom: -6, right: -7 }, theme.mixins.size(22), { backgroundColor: '#BBB', border: '2px solid white', borderRadius: '100%' }),
    action: Object.assign({ flexShrink: 0 }, jss_1.roundedBackground('#999'), { opacity: 0, cursor: 'pointer', transition: '200ms', '$container:hover &': {
            opacity: .6,
        }, '&:hover': {
            opacity: '1 !important',
        } }),
    svgPath: {
        fill: 'white',
    },
});
class ServiceImpl extends React.PureComponent {
    constructor(props) {
        super(props);
        this.handleAddApplication = () => {
            const { service, iconPath } = this.props;
            const serviceId = (service.deprecated && service.newVersionId) ? service.newVersionId : service.id;
            this.props.onAdd(serviceId, iconPath, this.iconRef.current);
        };
        this.iconRef = React.createRef();
    }
    render() {
        const { classes, service, isExtension, iconPath, actionType, subTitle } = this.props;
        return (React.createElement("div", { className: classes.container },
            React.createElement("div", { className: classes.iconContainer },
                React.createElement("img", { ref: this.iconRef, className: classes.icon, src: iconPath }),
                isExtension &&
                    React.createElement("div", { className: classes.iconPin },
                        React.createElement(Icon_1.Icon, { symbolId: Icon_1.IconSymbol.EXTENSION, size: 25, color: '#5d5d5d' }))),
            React.createElement("p", { className: classes.serviceDetails },
                React.createElement("strong", { className: classes.serviceName }, service.name),
                subTitle && React.createElement("small", null, subTitle)),
            actionType &&
                React.createElement(Icon_1.Icon, { symbolId: ServiceActionButtonIconMap[actionType], size: 24, className: classes.action, onClick: this.handleAddApplication })));
    }
}
exports.Service = react_jss_1.default(styles)(ServiceImpl);
//# sourceMappingURL=index.js.map