import * as React from "react";
import { SharedIconContainer } from "./styled";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { TouchableOpacity } from "react-native";
import { postOnFacebook, postOnTwitter, copyUrl } from "./social-media";
import { VideoItem } from "../video/video";

export type SharedIconsProps = {
  background: string;
  color: string;
  icon: string;
  data?: VideoItem;
};

function ShareIcon({ background, color, icon, data }: SharedIconsProps) {
  let shareURL = "https://www.bowltv.com/?v=" + data?._id;
  let shareMessage = data?.data.title;
  let iframeUrl = `<iframe src=${shareURL}/>`;

  const onShare = (icon: any) => {
    if (icon === "facebook") {
      postOnFacebook(shareURL, shareMessage);
    }
    if (icon === "twitter") {
      postOnTwitter(shareURL, shareMessage);
    }
    if (icon === "link-variant") {
      copyUrl(shareURL, "Url");
    } else {
      copyUrl(iframeUrl, "Iframe");
    }
  };

  return (
    <TouchableOpacity activeOpacity={0.6}>
      <SharedIconContainer style={{ backgroundColor: background }}>
        <Icon
          name={icon}
          size={25}
          color={color}
          onPress={() => onShare(icon)}
        />
      </SharedIconContainer>
    </TouchableOpacity>
  );
}

export default ShareIcon;