import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { spacing } from '../../spacing';
import { gray, white } from '../../style/theme';
import { getThemePropSelector } from '../../utils';
import { Icon } from '../icon/Icon.component';
import { Loader } from '../loader/Loader.component';
const SteppersContainer = styled.div `
  padding-top: 4rem;
  padding-left: 2rem;
`;
const StepContainer = styled.div `
  display: flex;
  min-height: 50px;
  min-width: 20rem;
`;
const Panel = styled.div `
  display: flex;
  flex-direction: column;
`;
const Circle = styled.div `
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;

  ${(props) => {
    const { statusCritical, statusHealthy, selectedActive, buttonSecondary } = props.theme;
    if (props.error) {
        return css `
        background-color: ${statusCritical};
        color: ${white};
      `;
    }
    else if (props.active) {
        return css `
        background-color: ${selectedActive};
        color: ${white};
        svg {
          fill: ${white};
        }
      `;
    }
    else if (props.completed) {
        return css `
        background-color: ${statusHealthy};
        color: ${white};
      `;
    }
    else {
        return css `
        background-color: ${buttonSecondary};
        color: ${white};
      `;
    }
}};
`;
const StepHeader = styled.span `
  margin-left: ${spacing.r8};
  line-height: 30px;
  color: ${(props) => props.active
    ? getThemePropSelector('textPrimary')
    : getThemePropSelector('textSecondary')};
`;
const StepContent = styled.div `
  padding: ${spacing.r8} 0 ${spacing.r8} ${spacing.r8};
`;
const BottomBar = styled.hr `
  flex-grow: 1;
  margin: 0;
  border: none;
  margin: 4px 14px;

  ${(props) => {
    if (props.completed) {
        return css `
        border-left: 2px solid ${props.theme.statusHealthy};
      `;
    }
    else {
        return css `
        border-left: 2px solid ${gray};
      `;
    }
}};
`;
function Step(props) {
    const { title, content, active, completed, isLast, index = 0, error, inProgress, } = props;
    const circleContent = completed ? _jsx(Icon, { name: "Check" }) : index + 1;
    return (_jsxs(StepContainer, { children: [_jsxs(Panel, { children: [_jsx(Circle, { active: active, error: error, completed: completed, children: active && inProgress ? (_jsx(Loader, { size: "base" })) : (_jsx("span", { children: circleContent })) }), !isLast && _jsx(BottomBar, { completed: completed })] }), _jsxs(Panel, { children: [_jsx("div", { style: {
                            height: '30px',
                            display: 'flex',
                            alignItems: 'center',
                        }, children: _jsx(StepHeader, { active: active, children: title }) }), active && _jsx(StepContent, { children: content })] })] }));
}
function Steppers({ steps, activeStep, ...rest }) {
    return (_jsx(SteppersContainer, { className: "sc-steppers", ...rest, children: steps.map(({ title, content, ...stepRest }, index) => (_jsx(Step, { title: title, content: content, active: index === activeStep, completed: index < activeStep, isLast: index === steps.length - 1, index: index, ...stepRest }, index))) }));
}
export { Steppers };
