import React from "react";
import styled, { useTheme } from "styled-components";
import { Flex, Box } from "../..";
import { Text } from "../../..";
import Tag from "../../../Tag";
import InfiniteLoader from "../../../loaders/InfiniteLoader";
import TimelineIndicator from "./TimelineIndicator";
const getContainerBackground = (theme, status, activeBackground) => {
    if (status === "completed") {
        return "transparent";
    }
    else if (status === "active") {
        return activeBackground || theme.colors.neutral.c20;
    }
    return "transparent";
};
const getContainerBorder = (theme, status, isLastItem) => {
    if (status === "completed") {
        return "transparent";
    }
    else if (isLastItem && status === "active") {
        return theme.colors.success.c50;
    }
    else if (status === "active") {
        return theme.colors.neutral.c40;
    }
    return "transparent";
};
const Container = styled(Flex) `
  position: relative;
  flex: 1;
  border-radius: ${p => p.theme.radii[2]}px;
  background: ${p => getContainerBackground(p.theme, p.status, p.activeBackground)};
  border: 1px solid ${p => getContainerBorder(p.theme, p.status, p.isLastItem)};
`;
const TextContainer = styled(Flex) `
  flex: 1;
  padding: 20px 16px;
`;
const TimelineIndicatorContentHeader = styled(Flex) `
  justify-content: space-between;
  align-items: center;
`;
function TimelineItem({ item, isFirstItem, isLastItem, onClick, isNeutral }) {
    const { colors } = useTheme();
    return (React.createElement(Flex, { flexDirection: "row", onClick: onClick, flex: 1 },
        React.createElement(TimelineIndicator, { status: item.status, isFirstItem: isFirstItem, isLastItem: isLastItem, mr: 4, isNeutral: isNeutral }),
        React.createElement(Container, { status: item.status, isLastItem: isLastItem && !isNeutral, overflow: "hidden", activeBackground: item.activeBackground },
            item.status === "active" ? item.background : null,
            React.createElement(TextContainer, { mb: 4, flexDirection: "column", zIndex: 1 },
                React.createElement(TimelineIndicatorContentHeader, { height: "20px" },
                    React.createElement(Text, { variant: "body", fontWeight: item.status === "active" ? "semiBold" : "medium", color: item.status !== "inactive" && isLastItem && !isNeutral
                            ? "success.c70"
                            : item.status === "active"
                                ? "primary.c80"
                                : "neutral.c70" }, item.title),
                    (item?.estimatedTime && item.status === "active" && (React.createElement(Tag, { size: "small", type: "opacity", active: true, disabled: true, textProps: { color: colors.neutral.c100 } }, `${item.estimatedTime / 60} min`))) ||
                        (item?.hasLoader && item.status === "active" && React.createElement(InfiniteLoader, { size: 30 }))),
                item.renderBody && item.status === "active" && (React.createElement(Box, { position: "relative", pt: 6 }, item.renderBody(item.status === "active")))))));
}
export default React.memo(TimelineItem);
//# sourceMappingURL=TimelineItem.js.map