import React, { memo } from "react";
import styled, { useTheme } from "styled-components";
import Flex from "../../layout/Flex";
import Text from "../../asorted/Text";
import Dropdown from "../../form/Dropdown";
import * as ControlModule from "../../form/SelectInput/Control";
const Link = styled(Text).attrs({
    ff: "Inter|SemiBold",
    fontSize: 3,
    color: "neutral.c80",
    tabIndex: 0,
}) `
  cursor: pointer;
  :hover,
  :active,
  :focus {
    color: ${p => p.theme.colors.neutral.c100};
    text-decoration: underline;
  }
`;
function isMultiSegment(segment) {
    return segment.options !== undefined;
}
export default memo(function Breadcrumb({ segments, onChange }) {
    const theme = useTheme();
    const [contents] = segments.reduce(([renderArray, valuesArray], segment, index) => {
        const values = [...valuesArray];
        renderArray.push(React.createElement(React.Fragment, null,
            index > 0 ? (React.createElement(Text, { fontWeight: "semiBold", color: "neutral.c40", variant: "paragraph" }, "/")) : null,
            isMultiSegment(segment) ? (React.createElement(Dropdown, { label: "", options: segment.options, value: segment.value, onChange: elt => elt && onChange([...values, elt.value]), styles: {
                    control: (provided, state) => (Object.assign(Object.assign({}, ControlModule.getStyles(theme)(provided, state)), { cursor: "pointer" })),
                    singleValue: provided => (Object.assign(Object.assign({}, provided), { margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined, color: theme.colors.neutral.c80, ":hover": {
                            color: theme.colors.neutral.c100,
                            textDecoration: "underline",
                        } })),
                } })) : (React.createElement(Link, { onKeyDown: (event) => ["Enter", " "].includes(event.key) && onChange([...values, segment.value]), onClick: () => onChange([...values, segment.value]) }, segment.label))));
        valuesArray.push(isMultiSegment(segment) ? segment.value.value : segment.value);
        return [renderArray, valuesArray];
    }, [[], []]);
    return (React.createElement(Flex, { columnGap: 5, alignItems: "center" }, contents));
});
//# sourceMappingURL=index.js.map