import { useState, useContext } from "react";

import AppContext from "../context/app";
import Player from "./player";

const ShowDoorDialog = () => {
  const { loading, openDoor, openSong, openSongIndex } = useContext(AppContext);
  const [showSolution, setShowSolution] = useState(false);
  const [showHint, setShowHint] = useState(false);

  const handleClose = () => {
    openDoor(null);
    setShowSolution(false);
  };

  if (loading || !openSong) {
    return null;
  }

  const { title, hint, id } = openSong;

  return (
    <div className="door-mask" onClick={handleClose}>
      <div className="door" onClick={event => event.stopPropagation()}>
        <a className="door-close" onClick={handleClose} title="Schließen">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="25px">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </a>
        <h1>Türchen {openSongIndex + 1}</h1>
        <Player hidden={!showSolution} />
        {!showSolution && (
          <div>
            {hint && !showHint && (
              <p>
                <a className="link" onClick={() => setShowHint(true)}>
                  Ich brauche einen Tip!
                </a>
              </p>
            )}
            {hint && showHint && (
              <div className="hint">
                <h4>Tip:</h4>
                <p>{hint}</p>
              </div>
            )}
            <p>
              <a className="solve" onClick={() => setShowSolution(true)}>
                Zeig mir die Lösung!
              </a>
            </p>
          </div>
        )}
      </div>
    </div>
  );
};

export default ShowDoorDialog;