import React, { useContext, useEffect } from "react";
import style from "./PhotoFlipCarousel.module.css";
import { GameContext } from "../../context/GameContext";

function PhotoFlipCarousel({ theme, data, background, color, poster }) {
  const { setGameLink } = useContext(GameContext);

  useEffect(() => {
    initialize();
  }, []);

  const initialize = () => {
    const card1 = document.getElementById("card1");
    const card2 = document.getElementById("card2");
    const card3 = document.getElementById("card3");
    const card4 = document.getElementById("card4");

    card1.classList.add(style.card1);
    card2.classList.add(style.card2);
    card3.classList.add(style.card3);
    card4.classList.add(style.card4);
  };

  const handleSlide = (dir) => {
    console.log("clicked");
    const card1 = document.getElementsByClassName(style.card1)[0];
    const card2 = document.getElementsByClassName(style.card2)[0];
    const card3 = document.getElementsByClassName(style.card3)[0];
    const card4 = document.getElementsByClassName(style.card4)[0];

    if (dir === "FORWARD") {
      card4.classList.add(style.slide_forward);

      onKeyframes(card4, {
        50: () => {
          card1.classList.remove(style.card1);
          card2.classList.remove(style.card2);
          card3.classList.remove(style.card3);
          card4.classList.remove(style.card4);

          card1.classList.add(style.card2);
          card2.classList.add(style.card3);
          card3.classList.add(style.card4);
          card4.classList.add(style.card1);
        },
        100: () => {
          card4.classList.remove(style.slide_forward);
        },
      });
    } else {
      card1.classList.add(style.slide_backward);

      onKeyframes(card1, {
        50: () => {
          card1.classList.remove(style.card1);
          card2.classList.remove(style.card2);
          card3.classList.remove(style.card3);
          card4.classList.remove(style.card4);

          card1.classList.add(style.card4);
          card2.classList.add(style.card1);
          card3.classList.add(style.card2);
          card4.classList.add(style.card3);
        },
        100: () => {
          card1.classList.remove(style.slide_backward);
        },
      });
    }
  };

  function onKeyframes(element, handlers) {
    var from = handlers[0] || handlers.from;
    var to = handlers[100] || handlers.to;
    delete handlers.from;
    delete handlers[0];
    delete handlers.to;
    delete handlers[100];

    handlers = Object.keys(handlers).map(function (k) {
      return [k, this[k]];
    }, handlers);

    element.addEventListener("animationstart", function () {
      from && from.apply(this, arguments);
      if (handlers.length) {
        var match = /(\d+)(m?)s/.exec(
          window.getComputedStyle(element).animationDuration
        );
        var duration = (match[2] ? 1 : 1e3) * match[1];
        handlers.forEach(function (pair) {
          setTimeout(pair[1], (pair[0] / 100) * duration);
        });
      }
    });
    to && element.addEventListener("animationend", to);
  }

  return (
    <div
      className={`${style.container} ${
        theme === "TEENYBEANS"
          ? style.teenybeans
          : theme === "INTERAKTO"
          ? style.interakto
          : style.default
      } `}
    >
      <button
        className={style.nav_btn}
        style={{ backgroundColor: background, color: color }}
        onClick={() => handleSlide("BACKWARD")}
      >
        <i class="fa fa-chevron-left" aria-hidden="true"></i>
      </button>
      <div className={style.deck}>
        {data.map((item) => (
          <div
            id={item.id}
            className={style.card}
            style={{
              backgroundImage: `url(${item.img})`,
              width: "100%",
              height: "100%",
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              backgroundPosition: "center",
              backgroundColor: color,
            }}
          >
            {item.type === "audio" ? (
              <video
                width={"100%"}
                poster={poster}
                height="auto"
                controls
                controlsList="nodownload"
              >
                <source src={item.img} type="video/mp4" />
              </video>
            ) : (
              <>
                {item.link && (
                  <a href={"/worksheet"} className={style.btn}>
                    <button onClick={() => setGameLink(item.link)}>
                      Try now
                    </button>
                  </a>
                )}
              </>
            )}
          </div>
        ))}
      </div>
      <button
        className={style.nav_btn}
        style={{ backgroundColor: background, color: color }}
        onClick={() => handleSlide("FORWARD")}
      >
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
      </button>
    </div>
  );
}

export default PhotoFlipCarousel;
