"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Breadcrumbs = void 0;
const react_1 = __importDefault(require("react"));
const inlines_1 = require("inlines");
const utils_1 = require("../../utils/");
const Text_1 = require("../Text");
const varsUtilities_1 = require("../../varsUtilities");
const StyledLink = (0, inlines_1.styled)('div', {
    alignItems: 'center',
    borderRadius: 4,
    display: 'flex',
    height: 32,
    cursor: 'pointer',
});
// TODO: maybe mobile sizes?
const Breadcrumbs = ({ data, style, active, onChange, ...props }) => {
    if (!data) {
        return null;
    }
    return (react_1.default.createElement(inlines_1.styled.div, { style: { display: 'flex', ...style }, ...props }, Object.keys(data).map((key, index) => {
        const el = data[key];
        const onClick = typeof el === 'function'
            ? (e) => {
                if (onChange) {
                    onChange(key);
                }
                el(e);
            }
            : () => {
                if (onChange) {
                    onChange(key);
                }
            };
        const label = (react_1.default.createElement(Text_1.Text, { selectable: "none", size: 16, weight: "strong", style: {
                padding: '2px 8px',
                color: index === Object.keys(data).length - 1
                    ? (0, varsUtilities_1.color)('content', 'default', 'secondary')
                    : (0, varsUtilities_1.color)('content', 'default', 'primary'),
                borderRadius: 4,
                '&:hover': index === Object.keys(data).length - 1
                    ? null
                    : {
                        backgroundColor: (0, varsUtilities_1.color)('action', 'system', 'hover'),
                    },
                [utils_1.BpTablet]: {
                    '&:hover': {
                        backgroundColor: (0, varsUtilities_1.color)('action', 'system', 'normal'),
                    },
                },
                '&:focus': {
                    backgroundColor: (0, varsUtilities_1.color)('action', 'system', 'active'),
                },
            } }, typeof el === 'function' ? key : el));
        return (Object.keys(data).length > 4 && index < 3) ||
            (Object.keys(data).length > 4 &&
                index === Object.keys(data).length - 1) ? (react_1.default.createElement(StyledLink, { key: index, onClick: onClick },
            label,
            Object.keys(data).length - 1 !== index && (react_1.default.createElement(Text_1.Text, { selectable: "none", size: 16, weight: "strong", light: true, style: {
                    marginLeft: 12,
                    marginRight: 12,
                } }, "/")))) : Object.keys(data).length > 4 && index === 3 ? (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(Text_1.Text, { selectable: "none", size: 16, weight: "strong", style: { padding: '2px 8px' } }, "..."),
            react_1.default.createElement(Text_1.Text, { selectable: "none", size: 16, light: true, weight: "strong", style: {
                    marginLeft: 12,
                    marginRight: 12,
                } }, "/"))) : Object.keys(data).length < 5 ? (react_1.default.createElement(StyledLink, { key: index, onClick: onClick },
            label,
            Object.keys(data).length - 1 !== index && (react_1.default.createElement(Text_1.Text, { selectable: "none", size: 16, weight: "strong", style: {
                    marginLeft: 12,
                    marginRight: 12,
                    color: (0, varsUtilities_1.color)('content', 'default', 'secondary'),
                } }, "/")))) : null;
    })));
};
exports.Breadcrumbs = Breadcrumbs;
//# sourceMappingURL=index.js.map