// Icons
const icons = {
  search:
    "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/icons/search.svg",
  logo:
    "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/icons/react.svg",
  home:
    "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/icons/home.svg",
  badge:
    "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/icons/badge.svg",
  joystick:
    "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/icons/joystick.svg",
  message:
    "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/icons/message.svg",
  play:
    "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/icons/play.svg"
};

// JSON Dummy Data
const dummy =
  "https://raw.githubusercontent.com/gestok/streaming-app/data/dummy.json";

// Random Data
const streamers = [
  {
    id: "ESL_SC2",
    logo:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/streamers/ESL_SC2.png",
    banner:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/banners/esl_sc2.jpg",
    viewers: Math.floor(Math.random() * 500) + 10,
    followers: Math.floor(Math.random() * 10000) + 100,
    videos: Math.floor(Math.random() * 200) + 20
  },
  {
    id: "OgamingSC2",
    logo:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/streamers/OG_SC2.png",
    banner:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/banners/og-sc2.jpg",
    viewers: Math.floor(Math.random() * 500) + 10,
    followers: Math.floor(Math.random() * 10000) + 100,
    videos: Math.floor(Math.random() * 200) + 20
  },
  {
    id: "cretetion",
    logo:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/streamers/cretetion.png",
    banner:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/banners/cretetion.jpg",
    viewers: Math.floor(Math.random() * 500) + 10,
    followers: Math.floor(Math.random() * 10000) + 100,
    videos: Math.floor(Math.random() * 200) + 20
  },
  {
    id: "freecodecamp",
    logo:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/streamers/freecodecamp.png",
    banner:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/banners/freecodecamp.jpg",
    viewers: Math.floor(Math.random() * 500) + 10,
    followers: Math.floor(Math.random() * 10000) + 100,
    videos: Math.floor(Math.random() * 200) + 20
  },
  {
    id: "storbeck",
    banner:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/banners/league.jpg",
    viewers: Math.floor(Math.random() * 500) + 10,
    followers: Math.floor(Math.random() * 10000) + 100,
    videos: Math.floor(Math.random() * 200) + 20
  },
  {
    id: "habathcx",
    banner:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/banners/wow.jpg",
    viewers: Math.floor(Math.random() * 500) + 10,
    followers: Math.floor(Math.random() * 10000) + 100,
    videos: Math.floor(Math.random() * 200) + 20
  },
  {
    id: "RobotCaleb",
    logo:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/streamers/RobotCaleb.png",
    banner:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/banners/code.jpg",
    viewers: Math.floor(Math.random() * 500) + 10,
    followers: Math.floor(Math.random() * 10000) + 100,
    videos: Math.floor(Math.random() * 200) + 20
  },
  {
    id: "noobs2ninjas",
    logo:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/streamers/noobs2ninjas.png",
    banner:
      "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/banners/codespiral.jpg",
    viewers: Math.floor(Math.random() * 500) + 10,
    followers: Math.floor(Math.random() * 10000) + 100,
    videos: Math.floor(Math.random() * 200) + 20
  }
];

const Carousel = ({ children }) => {
  let pos = { left: 0, x: 0 };
  const carousel = React.useRef(null);

  const handleMouseDown = (e) => {
    e.preventDefault();

    pos = {
      left: carousel.current.scrollLeft,
      x: e.clientX
    };
    carousel.current.addEventListener("mousemove", handleMouseMove);
    carousel.current.addEventListener("mouseup", handleMouseUp);
  };

  const handleMouseMove = (e) => {
    const dx = e.clientX - pos.x;
    carousel.current.scrollLeft = pos.left - dx;
  };

  const handleMouseUp = () => {
    carousel.current.removeEventListener("mousemove", handleMouseMove);
    carousel.current.removeEventListener("mouseup", handleMouseUp);
  };

  return (
    <div
      ref={carousel}
      className="carousel d-flex gap4 overflow-auto"
      onMouseDown={handleMouseDown}
    >
      {children}
    </div>
  );
};

const Search = () => {
  return (
    <div className="searchWrapper d-flex gap3">
      <div className="searchBar d-flex gap1 relative">
        <img src={icons.search} className="user-select-none pe-none" />
        <input type="text" placeholder="Search streams" />
      </div>
      <img src={icons.logo} className="user-select-none pe-none" />
    </div>
  );
};

const Gamecard = ({ thumb, title, viewers }) => {
  const formatViewers = (viewers) => {
    return (viewers / 1000).toFixed(1);
  };

  return (
    <div className="cardWrapper d-inline-flex flex-column relative">
      <img className="thumb pe-none user-select-none" src={thumb} alt={title} />
      <div className="d-flex align-center justify-content-space-between glass gap2 user-select-none pe-none">
        <span className="title">{title}</span>
        <span className="d-flex align-center gap2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            viewBox="0 0 48 48"
            fill="var(--white)"
          >
            <path d="M24 31.5q3.55 0 6.025-2.475Q32.5 26.55 32.5 23q0-3.55-2.475-6.025Q27.55 14.5 24 14.5q-3.55 0-6.025 2.475Q15.5 19.45 15.5 23q0 3.55 2.475 6.025Q20.45 31.5 24 31.5Zm0-2.9q-2.35 0-3.975-1.625T18.4 23q0-2.35 1.625-3.975T24 17.4q2.35 0 3.975 1.625T29.6 23q0 2.35-1.625 3.975T24 28.6Zm0 9.4q-7.3 0-13.2-4.15Q4.9 29.7 2 23q2.9-6.7 8.8-10.85Q16.7 8 24 8q7.3 0 13.2 4.15Q43.1 16.3 46 23q-2.9 6.7-8.8 10.85Q31.3 38 24 38Zm0-15Zm0 12q6.05 0 11.125-3.275T42.85 23q-2.65-5.45-7.725-8.725Q30.05 11 24 11t-11.125 3.275Q7.8 17.55 5.1 23q2.7 5.45 7.775 8.725Q17.95 35 24 35Z" />
          </svg>
          {`${formatViewers(viewers)}K`}
        </span>
      </div>
    </div>
  );
};

const Livecard = ({ thumb, status, game, url, logo, name, viewers }) => {
  return (
    <div className="liveCard d-flex flex-column gap2">
      <a
        target="_blank"
        href={url ? url : "#"}
        className={`${!url && "gray"} preview d-flex relative`}
      >
        <img
          className="d-flex pe-none user-select-none"
          src={thumb}
          alt={`${name} Live`}
        />
        <span className="status pe-none user-select-none">
          {status === "offline" ? "OFF" : "LIVE"}
        </span>
      </a>
      <div className="vitals d-flex gap2 justify-content-space-between align-center relative">
        <img src={thumb} className={`${!url && "gray"} blurred`} />
        <div className="d-flex gap1 justify-content-space-between align-center glass user-select-none">
          <div className="d-flex align-center gap1">
            {logo && <img src={logo} className="logo d-flex" />}
            <div className="d-flex flex-column gap1">
              {name && <span className="name">{name}</span>}
              {url && <span className="playing">{game}</span>}
            </div>
          </div>
          {url && <div className="viewers">{viewers} VIEWERS</div>}
        </div>
      </div>
    </div>
  );
};

const Streamer = ({ banner, logo, name, status, followers, videos }) => {
  const formatFollowers = (num) =>
    num < 1000 ? num : `${(num / 1000).toFixed(1)}K`;

  return (
    <div className="streamerCard d-flex flex-column relative">
      <img className="banner" src={banner} />
      <div className="details d-flex flex-column">
        <div className="d-flex justify-content-center">
          <img className="logo" src={logo} />
        </div>
        <div className="d-flex gap1 align-center justify-content-center">
          <span className="name">{name}</span>
          <img src={icons.badge} alt="verified" />
        </div>
        <div
          className={`status ${status} d-inline-flex justify-content-center relative`}
        >
          {status}
        </div>
        <div className="d-flex justify-content-space-between gap2">
          <div className="d-flex flex-column gap1">
            <span className="value">{formatFollowers(followers)}</span>
            <span className="label">FOLLOWERS</span>
          </div>
          <div className="d-flex flex-column text-right gap1">
            <span className="value">{videos}</span>
            <span className="label">VIDEOS</span>
          </div>
        </div>
      </div>
    </div>
  );
};

const Navigation = () => {
  return (
    <div className="navbar d-flex">
      <a
        className="btn d-flex align-center justify-content-center user-select-none"
        href="#"
        title="Home"
      >
        <img src={icons.home} alt="" className="d-flex" />
      </a>
      <a
        className="btn d-flex align-center justify-content-center user-select-none"
        href="#"
        title="Clips"
      >
        <img src={icons.play} alt="" className="d-flex" />
      </a>
      <a
        className="btn d-flex align-center justify-content-center user-select-none"
        href="#"
        title="Add"
      >
        <span className="add d-flex justify-content-center align-center">
          +
        </span>
      </a>
      <a
        className="btn d-flex align-center justify-content-center user-select-none"
        href="#"
        title="Games"
      >
        <img src={icons.joystick} alt="" className="d-flex" />
      </a>
      <a
        className="btn d-flex align-center justify-content-center user-select-none"
        href="#"
        title="Messages"
      >
        <img src={icons.message} alt="" className="d-flex" />
      </a>
    </div>
  );
};

const useFetchStreamers = () => {
  const offline =
    "https://raw.githubusercontent.com/gestok/streaming-app/main/src/assets/thumbs/streamers/offline.jpg";
  const url = "https://twitch-proxy.freecodecamp.rocks/twitch-api/streams";
  const [streamerData, setStreamerData] = React.useState([]);
  const [dummyData, setDummyData] = React.useState(null);
  const [completed, setCompleted] = React.useState(false);

  const fetchDummy = async () => {
    let res = await fetch(dummy);
    let data = await res.json();
    await setDummyData(data);
  };

  const fetchStreamers = async () => {
    await Promise.all(
      streamers.map(async (streamer) => {
        const res = await fetch(`${url}/${streamer.id}`);
        const data = await res.json();
        let info = {
          name: streamer.id,
          logo: streamer.logo || offline,
          banner: streamer.banner,
          viewers: 0,
          followers: streamer.followers,
          videos: streamer.videos
        };
        if (data["stream"] === null) {
          info.game = "Offline";
          info.status = "offline";
        } else if (data["stream"] === undefined) {
          info.game = "Account Closed";
          info.status = "offline";
        } else {
          info.game = data.stream.game;
          info.viewers = data.stream.viewers;
          info.url = data.stream.channel.url;
          info.status = "online";
        }
        setStreamerData((streamerData) => [...streamerData, info]);
      })
    );
    await fetchDummy();
    setCompleted(true);
  };

  React.useEffect(() => {
    fetchStreamers();
    return () => fetchStreamers();
  }, []);

  return [completed, streamerData, dummyData];
};

const App = () => {
  const [completed, streamers, dummy] = useFetchStreamers();

  const shuffleArray = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  };

  return (
    <div className="streamApp relative">
      <div className="stub"></div>
      <Search />
      <span className="sectionTitle user-select-none">Recommended games</span>
      <Carousel>
        {completed &&
          shuffleArray(dummy.games).map((game, i) => {
            return (
              <Gamecard
                key={game.slug + i}
                thumb={game.thumb}
                title={game.name}
                viewers={game.viewers}
              />
            );
          })}
      </Carousel>
      <span className="sectionTitle user-select-none">Popular Lives</span>
      <Carousel>
        {completed &&
          streamers.map((streamer, i) => {
            return (
              <Livecard
                key={`${streamer.name + i}_live`}
                thumb={dummy.lives[i].thumb}
                status={streamer.status}
                game={streamer.game}
                url={streamer.url}
                logo={streamer.logo}
                name={streamer.name}
                viewers={streamer.viewers}
              />
            );
          })}
      </Carousel>
      <span className="sectionTitle user-select-none">Favourite Streamers</span>
      <Carousel>
        {completed &&
          streamers.map((streamer, i) => {
            return (
              <Streamer
                key={streamer.name + i}
                banner={streamer.banner}
                logo={streamer.logo}
                name={streamer.name}
                status={streamer.status}
                followers={streamer.followers}
                viewers={streamer.viewers}
                videos={streamer.videos}
              />
            );
          })}
      </Carousel>
      <Navigation />
    </div>
  );
};

// Render
const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);