/** @jsxRuntime classic */
/** @jsx jsx */
import React, { Fragment } from 'react';
import { css, jsx, useTheme } from '@emotion/react';

import { BnIcon } from '../icons_v2';
import { dividerCss, stepCss, stepContainerCss } from './style';

export const Steps = ({
  arr,
  activeStep,
  handlePrevious,
}: {
  arr: any[];
  activeStep: number;
  handlePrevious: (val: number) => void;
}) => {
  return (
    <div css={stepContainerCss}>
      {arr.map((step, index) => {
        if (index === 0) {
          return (
            <Step
              handleClick={handlePrevious}
              key={index}
              index={index}
              isActive={index === activeStep}
              passed={index < activeStep}
              label={step}
            />
          );
        } else {
          return (
            <Fragment key={index}>
              <Divider />
              <Step
                handleClick={handlePrevious}
                key={index}
                index={index}
                isActive={index === activeStep}
                passed={index < activeStep}
                label={step}
              />
            </Fragment>
          );
        }
      })}
    </div>
  );
};

interface IStepProps {
  isActive: boolean;
  index: number;
  label: string;
  passed: boolean;
  handleClick: (val: number) => void;
}

const Step = ({ isActive, index, label, passed, handleClick }: IStepProps) => {
  const colors = useTheme();
  return (
    <div
      onClick={() => {
        if (passed) {
          handleClick(index);
        }
      }}
      css={stepCss(colors, isActive, passed)}
    >
      <div className="step">
        {passed ? <BnIcon icon="check" props={{}} /> : index + 1}
      </div>
      <div className="step-label">{label}</div>
      <div className="step-border" />
    </div>
  );
};

const Divider = () => {
  const colors = useTheme();
  return <div css={dividerCss(colors)} />;
};