"use strict";

import { useContext } from 'react';
import { View } from 'react-native';
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 { getStepColor, getStepTextStyle } from "./utils.js";
import styles from "./styles.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const StepsHorizontal = ({
  steps,
  size,
  activeIndex
}) => {
  const {
    theme
  } = useContext(ApplicationContext);
  const renderStepIcon = index => {
    const {
      error,
      icon
    } = steps[index];
    const stepStyle = getStepColor(theme, activeIndex, index, error, steps.length);
    const iconSource = error ? 'close' : 'check';
    let iconStyle = styles.stepIcon;
    let checkIconSize = 14;
    if (size === 'small') {
      iconStyle = styles.stepIconSmall;
      checkIconSize = 12;
    }
    return /*#__PURE__*/_jsxs(View, {
      style: Styles.rowCenter,
      children: [/*#__PURE__*/_jsx(View, {
        style: [styles.lineHorizontal, styles.radiusRight, {
          backgroundColor: stepStyle.lineColorLeft
        }]
      }), /*#__PURE__*/_jsx(View, {
        style: [iconStyle, {
          backgroundColor: stepStyle.backgroundColor,
          borderColor: stepStyle.borderColor
        }],
        children: /*#__PURE__*/_jsx(Icon, {
          size: checkIconSize,
          color: index <= activeIndex ? Colors.white : undefined,
          name: icon ?? iconSource
        })
      }), /*#__PURE__*/_jsx(View, {
        style: [styles.lineHorizontal, styles.radiusLeft, {
          backgroundColor: stepStyle.lineColorRight
        }]
      })]
    });
  };
  return /*#__PURE__*/_jsx(View, {
    style: styles.horizontalContainer,
    children: steps.map((i, index) => {
      const {
        title,
        description,
        error,
        time
      } = i;
      const typoStyle = getStepTextStyle(theme, activeIndex, index, error, size);
      return /*#__PURE__*/_jsxs(View, {
        style: Styles.flexCenter,
        children: [!!time && /*#__PURE__*/_jsx(Text, {
          style: styles.textCenter,
          color: typoStyle.time.color,
          typography: typoStyle.time.typography,
          fontWeight: typoStyle.time.fontWeight,
          children: time
        }), renderStepIcon(index), !!title && /*#__PURE__*/_jsxs(_Fragment, {
          children: [/*#__PURE__*/_jsx(Text, {
            style: styles.textCenter,
            color: typoStyle.title.color,
            typography: typoStyle.title.typography,
            fontWeight: typoStyle.title.fontWeight,
            children: title
          }), /*#__PURE__*/_jsx(SizedBox, {
            height: Spacing.XS
          })]
        }), !!description && /*#__PURE__*/_jsx(Text, {
          style: styles.textCenter,
          color: typoStyle.description.color,
          typography: typoStyle.description.typography,
          fontWeight: typoStyle.description.fontWeight,
          children: description
        })]
      }, `Step ${index}`);
    })
  });
};
export default StepsHorizontal;
//# sourceMappingURL=StepsHorizontal.js.map