import React, { useState } from "react";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import useModuleStore from "../../../store/useModuleStore";
import { PlayIcon } from "../../icons/ShortcutIcons";
import InputToggle from "../../ui/inputs/InputToggle";
import { EyeCloseIcon, WalkIcon } from "../../icons/ExportCommonIcons";
import { ExitIcon } from "../../icons/SimulationIcons";

const ControlsPlayer = () => {
  const { setIsPlaying } = usePlayButtonStore();
  const { activeModule } = useModuleStore();
  const [walkMode, setWalkMode] = useState(false);
  const [hidePlayer, setHidePlayer] = useState(false);

  const changeCamMode = () => {
    setWalkMode(!walkMode);
    console.log("switch camera mode to first person");
  };
  return (
    <div className="controls-player-container">
      {!hidePlayer && (
        <div className="controls-left">
          <PlayIcon />
          <div className="label">Running {activeModule}...</div>
        </div>
      )}

      <div className="controls-right">
        {!hidePlayer && (
          <div className="walkMode-wrapper">
            <WalkIcon />
            <InputToggle
              value={walkMode}
              inputKey="1"
              label="Walk Mode"
              onClick={changeCamMode}
            />
          </div>
        )}
        <button
          id="controls-player-play-button"
          className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
          onClick={() => setIsPlaying(false)}
        >
          <div className="icon">
            <ExitIcon />
          </div>
          {!hidePlayer && "Exit"}
        </button>
        <button
          className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
          id="hide-btn"
          onClick={() => {
            setHidePlayer(!hidePlayer);
          }}
        >
          <div className="icon">
            <EyeCloseIcon />
          </div>
          {!hidePlayer && "Hide"}
        </button>
      </div>
    </div>
  );
};

export default ControlsPlayer;