import React, { memo, Fragment } from "react";
import styled from "styled-components";
import { border, color, space } from "styled-system";
import { IconsLegacy } from "../../../../index";
import Text from "../../../asorted/Text";
import Flex from "../../../layout/Flex";
export const Item = {
    Container: styled.div.attrs({
        mx: "8px",
    }) `
    display: flex;
    justify-content: center;
    align-items: center;
    width: ${p => p.theme.space[8]}px;
    height: ${p => p.theme.space[8]}px;
    ${color}
    ${border}
    ${space}
  `,
    Spacer: styled.div `
    display: flex;
    align-self: stretch;
    ${space}
  `,
    Current: styled.div.attrs({
        backgroundColor: "primary.c90",
    }) `
    width: 6px;
    height: 6px;
    border-radius: 6px;
    ${color}
  `,
    Pending: styled.div.attrs({
        backgroundColor: "neutral.c70",
    }) `
    width: ${p => p.theme.space[2]}px;
    height: ${p => p.theme.space[2]}px;
    border-radius: ${p => p.theme.space[2]}px;
    ${color}
  `,
    Completed: () => React.createElement(IconsLegacy.CheckAloneMedium, { size: 16 }),
    Disabled: () => React.createElement(IconsLegacy.CloseMedium, { size: 16 }),
    Errored: () => React.createElement(IconsLegacy.CloseMedium, { size: 16 }),
};
export const StepText = styled(Text) `
  text-align: center;
  white-space: pre-wrap;
  color: ${p => {
    if (p.state === "errored") {
        return p.theme.colors.error.c50;
    }
    if (p.state === "disabled") {
        return p.theme.colors.neutral.c50;
    }
    if (p.state === "pending") {
        return p.theme.colors.neutral.c70;
    }
    return p.theme.colors.neutral.c100;
}};
`;
const BaseSeparator = styled.div `
  flex: 1;
  position: relative;
  overflow-x: hidden;
  background-color: ${p => p.theme.colors.neutral.c40};
  height: 1px;
  top: ${p => p.theme.space[5]}px;
`;
const Separator = {
    Step: styled(BaseSeparator) ``,
    Item: styled(BaseSeparator) ``,
};
const stepContentsByState = {
    pending: (React.createElement(Item.Container, null,
        React.createElement(Item.Pending, null))),
    current: (React.createElement(Item.Container, { backgroundColor: "primary.c20", borderRadius: "8px" },
        React.createElement(Item.Current, null))),
    completed: (React.createElement(Item.Container, { color: "primary.c90", backgroundColor: "primary.c20", borderRadius: "8px" },
        React.createElement(Item.Completed, null))),
    errored: (React.createElement(Item.Container, { color: "error.c50", backgroundColor: "warning.c30", borderRadius: "8px" },
        React.createElement(Item.Errored, null))),
    disabled: (React.createElement(Item.Container, { color: "neutral.c50" },
        React.createElement(Item.Disabled, null))),
};
export const Step = memo(function Step({ state, label: Label, hideLeftSeparator, nextState, }) {
    const inactive = state === "pending";
    const nextInactive = state === "pending";
    return (React.createElement(Flex, { flexDirection: "column", alignItems: "center", flex: 20 },
        React.createElement(Item.Spacer, { mb: 5 },
            (!hideLeftSeparator && React.createElement(Separator.Item, { inactive: inactive, position: "left" })) || (React.createElement(Flex, { flex: "1" })),
            stepContentsByState[state],
            (nextState && React.createElement(Separator.Item, { inactive: nextInactive, position: "right" })) || (React.createElement(Flex, { flex: "1" }))),
        typeof Label === "string" ? (React.createElement(StepText, { state: state, variant: "small" }, Label)) : (React.createElement(Label, { state: state }))));
});
function getState(activeIndex, index, errored, disabled, completed) {
    if (completed) {
        return "completed";
    }
    if (disabled) {
        return "disabled";
    }
    if (activeIndex < index) {
        return "pending";
    }
    if (activeIndex === index) {
        return errored ? "errored" : "current";
    }
    return "completed";
}
function Stepper({ steps, activeIndex = 0, errored, disabledIndexes, filterDuplicate, isOver, ...extraProps }) {
    const displayedSteps = filterDuplicate
        ? steps.filter((step, index) => index === 0 || step !== steps[index - 1])
        : steps;
    const dislayedActiveIndex = filterDuplicate
        ? displayedSteps.findIndex(step => step === steps[activeIndex])
        : activeIndex;
    return (React.createElement(Flex, { flexWrap: "nowrap", justifyContent: "space-between", ...extraProps }, displayedSteps.map((step, idx) => {
        const state = getState(dislayedActiveIndex, idx, errored, disabledIndexes?.includes(idx), isOver);
        const nextState = idx < displayedSteps.length - 1 ? getState(dislayedActiveIndex, idx + 1) : undefined;
        return (React.createElement(Fragment, { key: idx },
            idx > 0 && React.createElement(Separator.Step, { inactive: state === "pending" }),
            React.createElement(Step, { label: step, state: state, nextState: nextState, hideLeftSeparator: idx === 0 })));
    })));
}
export default memo(Stepper);
//# sourceMappingURL=index.js.map