import React, { useState } from "react";
import clsx from "clsx";

import { QUIZ_STEPS } from "@/config/data";
import { useStore } from "@/store";

import styles from "./styles.module.scss";

const Bullet = ({
  index,
  forceDisabled,
}: {
  index: number;
  forceDisabled?: boolean;
}) => {
  const step = useStore.use.step();
  const setStep = useStore.use.setStep();

  const maxStep = useStore.use.maxStep();

  const selected = step === index;

  const goToStep = (index: number) => {
    if (index <= maxStep) {
      setStep(index);
    }
  };

  function onKeyUpHandler(e: any) {
    e.preventDefault();
    if (e.key === "Enter") {
      goToStep(index);
    }
  }

  return (
    <i
      className={clsx(styles.bullet, {
        [styles.selected]: selected,
        [styles.active]: index <= maxStep,
        [styles.disabled]: forceDisabled,
      })}
      onClick={() => goToStep(index)}
      onKeyUp={onKeyUpHandler}
      aria-label={`Go to step ${index}`}
      role="button"
      tabIndex={
        index <= maxStep && step < QUIZ_STEPS.length - 2 && !selected ? 0 : -1
      }
      aria-hidden={
        !(index <= maxStep && step < QUIZ_STEPS.length - 2 && !selected) ||
        undefined
      }
    ></i>
  );
};

export default Bullet;