"use strict";

import { useContext } from 'react';
import { View } from 'react-native';
import { getStepColor, getStepTextStyle } from "./utils.js";
import { ApplicationContext } from "../Context/index.js";
import { Colors, Spacing, Styles } from "../Consts/index.js";
import { Icon } from "../Icon/index.js";
import { SizedBox } from "../SizedBox/index.js";
import { Text } from "../Text/index.js";
import styles from "./styles.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const StepsVertical = ({
  steps,
  activeIndex,
  size
}) => {
  const {
    theme
  } = useContext(ApplicationContext);
  return /*#__PURE__*/_jsx(View, {
    children: steps.map((i, index) => {
      const {
        error,
        description,
        title,
        time
      } = i;
      const stepStyle = getStepColor(theme, activeIndex, index, error, steps.length);
      const typoStyle = getStepTextStyle(theme, activeIndex, index, error, size);
      const {
        backgroundColor,
        borderColor
      } = stepStyle;
      let lineColor = theme.colors.background.disable;
      if (activeIndex > index) {
        lineColor = theme.colors.primary.light;
      }
      const iconSource = error ? 'close' : 'check';
      let iconStyle = styles.stepIcon;
      let checkIconSize = 16;
      if (size === 'small') {
        iconStyle = styles.stepIconSmall;
        checkIconSize = 12;
      }
      return /*#__PURE__*/_jsxs(View, {
        style: Styles.row,
        children: [/*#__PURE__*/_jsxs(View, {
          style: styles.iconContainer,
          children: [/*#__PURE__*/_jsx(View, {
            style: [iconStyle, {
              backgroundColor,
              borderColor
            }],
            children: /*#__PURE__*/_jsx(Icon, {
              size: checkIconSize,
              color: index <= activeIndex ? Colors.white : undefined,
              name: iconSource
            })
          }), index !== steps.length - 1 && /*#__PURE__*/_jsx(View, {
            style: [styles.lineVertical, {
              backgroundColor: lineColor,
              marginVertical: Spacing.XS
            }]
          })]
        }), /*#__PURE__*/_jsxs(View, {
          style: Styles.flex,
          children: [/*#__PURE__*/_jsxs(View, {
            style: Styles.rowSpace,
            children: [/*#__PURE__*/_jsx(Text, {
              numberOfLines: 2,
              style: Styles.flex,
              color: typoStyle.title.color,
              typography: typoStyle.title.typography,
              children: title
            }), /*#__PURE__*/_jsx(SizedBox, {
              width: Spacing.S
            }), /*#__PURE__*/_jsx(Text, {
              color: typoStyle.time.color,
              typography: typoStyle.time.typography,
              children: time
            })]
          }), /*#__PURE__*/_jsx(Text, {
            color: typoStyle.description.color,
            typography: typoStyle.description.typography,
            children: description
          })]
        })]
      }, `Step ${index}`);
    })
  });
};
export default StepsVertical;
//# sourceMappingURL=StepsVertical.js.map