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;
};
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { ChevronRightIcon } from '@fluentui/react-icons';
import { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton';
const useStyles = makeStyles((theme) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
    return ({
        root: {
            display: 'flex',
            justifyContent: 'flex-start',
            height: 48,
            width: '100%',
            paddingLeft: 0
        },
        iconButton: {
            width: 48,
            height: 48,
            marginLeft: 16 - (48 - 24) / 2
        },
        expanded: {},
        icon: {
            width: 14,
            height: 14,
            margin: (24 - 16) / 2,
            transition: (_a = theme === null || theme === void 0 ? void 0 : theme.transitions) === null || _a === void 0 ? void 0 : _a.create('transform', {
                easing: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.transitions) === null || _b === void 0 ? void 0 : _b.easing) === null || _c === void 0 ? void 0 : _c.sharp,
                duration: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.transitions) === null || _d === void 0 ? void 0 : _d.duration) === null || _e === void 0 ? void 0 : _e.shortest
            }),
            '$expanded &': {
                transform: 'scaleX(-1)'
            }
        },
        switch: {
            margin: (24 - 16) / 2,
            transition: (_f = theme === null || theme === void 0 ? void 0 : theme.transitions) === null || _f === void 0 ? void 0 : _f.create('transform', {
                easing: (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.transitions) === null || _g === void 0 ? void 0 : _g.easing) === null || _h === void 0 ? void 0 : _h.sharp,
                duration: (_k = (_j = theme === null || theme === void 0 ? void 0 : theme.transitions) === null || _j === void 0 ? void 0 : _j.duration) === null || _k === void 0 ? void 0 : _k.shortest
            }),
            '$expanded &': {
                transform: 'scaleX(-1)'
            }
        }
    });
}, { name: 'SidebarCollapseButton' });
/**
 * Custom styled button used for expanding/collapsing sidebars
 */
export const SidebarCollapseButton = (props) => {
    const classes = useStyles(props);
    const { expanded, className, id, udprecordid } = props, other = __rest(props, ["expanded", "className", "id", "udprecordid"]);
    const { t } = useTranslation();
    return (React.createElement("div", Object.assign({}, other, { className: clsx(className, classes.root, {
            [classes.expanded]: expanded
        }) }), React.createElement(FluentIconButton, { id: id, udprecordid: udprecordid, color: "inherit", className: clsx(classes.iconButton, classes.switch), "aria-label": expanded
            ? t('mainMenuAria.collapseNavigation')
            : t('mainMenuAria.expandNavigation'), icon: ChevronRightIcon })));
};
//# sourceMappingURL=SidebarCollapseButton.js.map