"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = exports.Chip = void 0;
var react_1 = __importDefault(require("react"));
var Chip_1 = __importDefault(require("@mui/material/Chip"));
var IconButton_1 = __importDefault(require("@mui/material/IconButton"));
var styles_1 = require("@mui/styles");
var colors_1 = require("../../base/colors");
var styles = {
    root: {
        backgroundColor: function (_a) {
            var color = _a.color;
            switch (color) {
                case "yes":
                    return colors_1.green.subtle;
                case "red":
                    return colors_1.red.subtle;
            }
            return "white";
        },
        border: function (_a) {
            var color = _a.color;
            switch (color) {
                case "yes":
                    return "1px solid " + colors_1.green.standard;
                case "red":
                    return "1px solid " + colors_1.red.standard;
            }
            return "1px solid " + colors_1.grey.light;
        },
        borderRadius: 4,
        height: 40,
        flex: 1,
        display: function (_a) {
            var inline = _a.inline;
            return inline || inline === undefined ? "inline-flex" : "flex";
        },
        justifyContent: "space-between",
        fontSize: "0.8125rem",
    },
    deletable: {
        "&:focus": {
            backgroundColor: "white",
        },
    },
};
exports.Chip = styles_1.withStyles(styles)(function (_a) {
    var classes = _a.classes, color = _a.color, rest = __rest(_a, ["classes", "color"]);
    return (react_1.default.createElement(Chip_1.default, __assign({ className: classes.root }, rest)));
});
var buttonBackgroundColor = function (_a) {
    var selected = _a.selected, sentiment = _a.sentiment;
    if (selected) {
        if (sentiment === "up") {
            return colors_1.green.standard;
        }
        else {
            return colors_1.red.standard;
        }
    }
    return "white";
};
var hoverBorderColor = function (_a) {
    var selected = _a.selected, sentiment = _a.sentiment;
    if (sentiment === "up") {
        return colors_1.green.standard;
    }
    else {
        return colors_1.red.standard;
    }
};
var hoverFontColor = function (_a) {
    var selected = _a.selected, sentiment = _a.sentiment;
    if (selected) {
        return "white";
    }
    if (sentiment === "up") {
        return colors_1.green.standard;
    }
    else {
        return colors_1.red.standard;
    }
};
var hoverBoxShadow = function (_a) {
    var selected = _a.selected;
    if (selected) {
        return "0px 2px 4px rgba(112, 32, 13, 0.4);";
    }
    return "none";
};
var buttonStyles = styles_1.createStyles({
    root: {
        backgroundColor: buttonBackgroundColor,
        border: function (_a) {
            var selected = _a.selected, sentiment = _a.sentiment;
            if (selected) {
                if (sentiment === "up") {
                    return "1px solid " + colors_1.green.standard;
                }
                else {
                    return "1px solid " + colors_1.red.standard;
                }
            }
            return "1px solid " + colors_1.grey.light;
        },
        color: function (_a) {
            var selected = _a.selected;
            return selected ? "white" : colors_1.text.secondary;
        },
        fontSize: 12,
        padding: 6,
        margin: "0 3px 0 3px",
        "&:hover": {
            backgroundColor: buttonBackgroundColor,
            color: hoverFontColor,
            border: function (props) { return "1px solid " + hoverBorderColor(props); },
            boxShadow: hoverBoxShadow,
        },
    },
});
exports.Button = styles_1.withStyles(buttonStyles)(function (_a) {
    var classes = _a.classes, selected = _a.selected, sentiment = _a.sentiment, children = _a.children, props = __rest(_a, ["classes", "selected", "sentiment", "children"]);
    return (react_1.default.createElement(IconButton_1.default, __assign({ className: classes.root }, props, { size: "large" }), children));
});
//# sourceMappingURL=ThumbChip.styles.js.map