import type { FC } from "react";
import { useAppDispatch, useAppSelector } from "../store/hooks";
import {
  clearSelectedPhase,
  setSelectedPhase,
} from "../store/slices/phaseSlice";
import type { PhaseType } from "../utils/types";

interface PropType {
  phase: PhaseType;
  current: boolean;
}

const Phase: FC<PropType> = ({ phase, current }) => {
  const dispatch = useAppDispatch();
  const selected = useAppSelector((state) => state.phase.selected);
  const thisSelected = selected === phase.name;

  const phaseClick = () => {
    if (thisSelected) {
      dispatch(clearSelectedPhase());
    } else {
      dispatch(setSelectedPhase(phase.name));
    }
  };

  return (
    <button
      type="button"
      className={`overflow-hidden relative w-96 p-2 ${phase.color} border border-2 shadow-md rounded-md ${phase.borderColor}`}
      onClick={phaseClick}
    >
      <div className="text-xl px-8">{phase.name}</div>
      <div className="text-sm px-8">
        {phase.minuteStart}-{phase.minuteEnd}
      </div>
      {thisSelected && <div className="text-md px-8">{phase.description}</div>}
      {current && (
        <>
          <div className="rotate-45 bg-white h-16 w-16 absolute -top-10 -left-12"></div>
          <div className="-rotate-45 bg-white h-16 w-16 absolute -bottom-10 -left-12"></div>
          <div className="bg-white w-16 absolute bottom-0 top-0 -left-14"></div>
        </>
      )}
    </button>
  );
};

export default Phase;