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 React from "react";
import CircledCheckSolidMedium from "@ledgerhq/icons-ui/reactLegacy/CircledCheckSolidMedium";
import styled, { useTheme } from "styled-components";
import Flex from "../../Flex";
const linesWidth = 2;
const BottomSegment = styled(Flex) `
  flex: 1;
  border-left-width: ${p => (p.hidden ? 0 : linesWidth)}px;
  border-right-width: 0;
  border-style: dashed;
  border-color: ${p => p.status === "completed" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c40};
  background: ${p => p.status === "completed" && p.theme.colors.primary.c80};
`;
const getIconBackground = (theme, status, isLastItem) => {
    if (isLastItem) {
        if (status === "inactive")
            return theme.colors.success.c10;
        return "transparent";
    }
    else if (status === "active") {
        return theme.colors.neutral.c40;
    }
    else {
        return "transparent";
    }
};
const getIconBorder = (theme, status, isLastItem) => {
    if (isLastItem) {
        return theme.colors.success.c70;
    }
    else if (status === "inactive") {
        return theme.colors.neutral.c40;
    }
    return theme.colors.primary.c80;
};
const CenterCircle = styled(Flex) `
  border-radius: 9999px;
  width: 100%;
  background: ${p => getIconBackground(p.theme, p.status, p.isLastItem)};
  border: 2px solid ${p => getIconBorder(p.theme, p.status, p.isLastItem)};
  align-items: center;
  justify-content: center;
  position: relative;
`;
const IconWrapper = styled(Flex) `
  height: 16px;
  width: 16px;
`;
const topSegmentDefaultHeight = 23;
const Container = styled(Flex) `
  flex-direction: column;
  align-items: center;
  margin-bottom: ${-topSegmentDefaultHeight}px;
  padding-top: ${topSegmentDefaultHeight}px;
`;
function TimelineIndicator(_a) {
    var { status, isLastItem } = _a, props = __rest(_a, ["status", "isLastItem"]);
    const { colors } = useTheme();
    return (React.createElement(Container, Object.assign({}, props),
        React.createElement(IconWrapper, null,
            React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(Flex, { position: "absolute" },
                React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c70 : colors.primary.c80, size: 20 }))))),
        isLastItem ? null : React.createElement(BottomSegment, { status: status })));
}
export default React.memo(TimelineIndicator);
TimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;
//# sourceMappingURL=TimelineIndicator.js.map