import * as React from "react";
import * as Url from "url-parse";
import { VideoWebView } from "./video-webview";
export const isTwitch = (url: string) => {
  return url.indexOf("twitch.tv/") > -1;
};

export const getTwitchEmbed = (url: string) => {
  let type = "channel";
  let id = "";
  let query = "";
  let parsedUrl = new Url(url);
  let pathParts = parsedUrl.pathname.split("/");

  if (pathParts.length === 2) {
    id = pathParts[1];
  } else {
    id = pathParts[2];
    type = "video";
  }

  query = `${type}=${id}`;

  return `
  <div style="padding-top: 56.25%; position: relative;">
    <iframe style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;"
    src="https://player.twitch.tv/?${query}"
    width="100%"
    height="100%"
    frameborder="0"
    scrolling="no"
    allowfullscreen="true">
  </iframe>
  <div>
`;
};

export const TwitchVideo = ({ url }: { url: string }) => {
  let iframe = React.useMemo(() => getTwitchEmbed(url), [url]);
  return <VideoWebView content={iframe} />;
};