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);
};
import { jsx as _jsx } from "react/jsx-runtime";
import DownArrow from "@mui/icons-material/KeyboardArrowDown";
import { memo } from "react";
import { tss } from "../theme";
export var GlArrow = memo(function (props) {
    var className = props.className, direction = props.direction, hasCircularBorder = props.hasCircularBorder, onClick = props.onClick, colorDark = props.colorDark, colorLight = props.colorLight;
    var _a = useStyles({
        direction: direction,
        "hasCircularBorder": hasCircularBorder !== null && hasCircularBorder !== void 0 ? hasCircularBorder : false,
        "colorDark": colorDark !== null && colorDark !== void 0 ? colorDark : "",
        "colorLight": colorLight !== null && colorLight !== void 0 ? colorLight : "",
        "classesOverrides": props.classes,
    }), classes = _a.classes, cx = _a.cx;
    return (_jsx("div", __assign({ onClick: onClick, className: cx(classes.root, className) }, { children: _jsx(DownArrow, { className: classes.arrow }) })));
});
var useStyles = tss
    .withName({ GlArrow: GlArrow })
    .withParams()
    .create(function (_a) {
    var theme = _a.theme, direction = _a.direction, hasCircularBorder = _a.hasCircularBorder, colorDark = _a.colorDark, colorLight = _a.colorLight;
    var color = (function () {
        if (theme.isDarkModeEnabled) {
            return colorDark.length === 0
                ? theme.colors.palette.light.main
                : colorDark;
        }
        return colorLight.length === 0
            ? theme.colors.palette.dark.main
            : colorLight;
    })();
    return {
        "root": __assign(__assign({ "border": hasCircularBorder
                ? "\n                    solid ".concat(color, " 2px\n                ")
                : undefined, "padding": 10, "borderRadius": "50%" }, (function () {
            var value = theme.spacing(5);
            return {
                "width": value,
                "height": value,
            };
        })()), { "transform": (function () {
                switch (direction) {
                    case "down":
                        return undefined;
                    case "up":
                        return "rotate(180deg)";
                    case "left":
                        return "rotate(90deg)";
                    case "right":
                        return "rotate(-90deg)";
                }
            })(), "alignItems": "center", "justifyContent": "center", "display": "flex" }),
        "arrow": {
            "fill": color,
        },
    };
});
//# sourceMappingURL=GlArrow.js.map