import "react-circular-progressbar/dist/styles.css";
import { CountdownCircleTimer } from "react-countdown-circle-timer";

interface Topic {
  id: number;
  name: string;
}

interface Props {
  getIsSidebarOpen: boolean;
  setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
  activeId: number | null;
  topics: Topic[];
  onTopicClick?: (topicId: number) => void;
  examDuration?: number | null;
}

const PsychometricSidebar = (props: Props) => {
  const examDuration = props.examDuration! * 60 || 0;

  return (
    <div
      className={`psychometric_sidebar user-sidebar ${props.getIsSidebarOpen ? "sidebar_open" : ""} d-flex gap-5 flex-column justify-content-center`}
      style={{ paddingTop: "0px" }}
    >
      {/* Start sidebar close icon */}
      <div className="pro-header text-end pb-0 mb-0 show-1023">
        <div
          className="fix-icon"
          onClick={() => props.setIsSidebarOpen(!props.getIsSidebarOpen)}
        >
          <span className="flaticon-close"></span>
        </div>
      </div>
      {/* End sidebar close icon */}
      <div className="d-flex justify-content-center">
        <CountdownCircleTimer
          isPlaying
          duration={examDuration}
          colors={"#3FE0D0"}
          size={150}
        >
          {({ remainingTime }) => {
            if (remainingTime === 0) {
              return <h5 className="text-dark">Time Over</h5>;
            }

            const minutes = Math.floor(remainingTime / 60);
            const seconds = remainingTime % 60;

            return (
              <p className="text-dark mb-0" style={{ fontSize: "1.5rem" }}>
                {minutes}:{seconds.toString().padStart(2, "0")}
              </p>
            );
          }}
        </CountdownCircleTimer>
      </div>
      <div className="sidebar-inner">
        <ul className="navigation">
          {props.topics.length > 0 ? (
            props.topics.map((item) => (
              <li
                className={`${item.id === props.activeId ? "active" : ""} mb-1`}
                key={item.id}
                onClick={() => props.onTopicClick?.(item.id)}
                style={{ cursor: "pointer" }}
              >
                <a className="pe-none">{item.name}</a>
              </li>
            ))
          ) : (
            <li className="mb-1">
              <a className="pe-none text-muted">Loading topics...</a>
            </li>
          )}
        </ul>
      </div>
    </div>
  );
};

export default PsychometricSidebar;