import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useContext, useMemo } from 'react';
import cls from 'clsx';
import { BORDER } from '../utils/constant';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';

const StepsItem = _a => {
  var {
    children
  } = _a,
      props = __rest(_a, ["children"]);

  const {
    index,
    parent: parentProps
  } = props;
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('step', prefixCls);

  if (!parentProps) {
    if (process.env.NODE_ENV !== 'production') {
      // eslint-disable-next-line no-console
      console.error('[React Vant] <Step> must be a child component of <Steps>.');
    }
  }

  const getStatus = () => {
    const active = +parentProps.active;

    if (index < active) {
      return 'finish';
    }

    return index === active ? 'process' : 'waiting';
  };

  const isActive = () => getStatus() === 'process';

  const lineStyle = useMemo(() => ({
    background: getStatus() === 'finish' ? parentProps.activeColor : parentProps.inactiveColor
  }), [index, parentProps.active, parentProps.activeColor, parentProps.inactiveColor]);
  const titleStyle = useMemo(() => {
    if (isActive()) {
      return {
        color: parentProps.activeColor
      };
    }

    if (!getStatus()) {
      return {
        color: parentProps.inactiveColor
      };
    }

    return {};
  }, [index, parentProps.active, parentProps.activeColor, parentProps.inactiveColor]);

  const onClickStep = () => {
    if (parentProps.onClickStep) parentProps.onClickStep(index);
  };

  const renderCircle = () => {
    var _a, _b, _c;

    const {
      activeColor
    } = parentProps;
    const finishIcon = (_a = props.finishIcon) !== null && _a !== void 0 ? _a : parentProps.finishIcon;
    const activeIcon = (_b = props.activeIcon) !== null && _b !== void 0 ? _b : parentProps.activeIcon;
    const inactiveIcon = (_c = props.inactiveIcon) !== null && _c !== void 0 ? _c : parentProps.inactiveIcon;

    if (isActive()) {
      if (activeIcon) {
        return React.cloneElement(activeIcon, {
          className: cls(bem('icon', 'active')),
          color: activeColor,
          style: {
            color: activeColor
          }
        });
      }
    }

    if (getStatus() === 'finish' && finishIcon) {
      return React.cloneElement(finishIcon, {
        className: cls(bem('icon', 'finish')),
        color: activeColor,
        style: {
          color: activeColor
        }
      });
    }

    if (inactiveIcon) {
      return React.cloneElement(inactiveIcon, {
        className: cls(bem('icon')),
        color: activeColor,
        style: {
          color: activeColor
        }
      });
    }

    return _jsx("i", {
      className: cls(bem('circle')),
      style: lineStyle
    });
  };

  const status = getStatus();
  return _jsxs("div", Object.assign({
    style: props.style,
    className: cls(props.className, BORDER, bem([parentProps.direction, {
      [status]: status
    }]))
  }, {
    children: [_jsx("div", Object.assign({
      className: cls(bem('title', {
        active: isActive()
      })),
      style: titleStyle,
      onClick: onClickStep
    }, {
      children: children
    })), _jsx("div", Object.assign({
      className: cls(bem('circle-container')),
      onClick: onClickStep
    }, {
      children: renderCircle()
    })), _jsx("div", {
      className: cls(bem('line')),
      style: lineStyle
    })]
  }));
};

export default StepsItem;