import device from "current-device";
import * as _ from "lodash";
import * as React from "react";

import { setImagePossiblyRevealedDownloadSheetListeners } from "../../utilities/interactions";
import { initCopy, initFb, initTwitter } from "../../utilities/social";

import { Button, ButtonSize, ButtonType } from "../Button";
import { Sheet, ISheetProps } from "../Sheet";
import { Image } from "../Image";
import { getImageSrc } from "../../utilities/image";

/**
 * The shareable object that is used to build urls.
 */
export interface IShareable {
  text?: string;
  url?: string;
}

export enum SocialPlatform {
  Twitter = "Twitter",
  Facebook = "Facebook",
  Instagram = "Instagram",
  LinkedIn = "LinkedIn",
}

export enum ClientPlatform {
  Email = "Email",
  Permalink = "Permalink",
  Sms = "SMS",
  Phone = "Phone",
  Raw = "Raw",
}

interface IShareProps {
  sheet: ISheetProps;
  onShare?: (platform: ClientPlatform | SocialPlatform) => void;
  title?: string;
  subtitle?: string;
  onAction?: () => void;
  socials?: SocialPlatform[];
  clients?: ClientPlatform[];
  shareable?: IShareable;
  imagePrefix?: string;
}

interface IShareState {
  copied?: boolean;
}

const defaultShareState: IShareState = {
  copied: false,
};

export class Share extends React.Component<IShareProps, IShareState> {
  public state: IShareState = defaultShareState;

  public componentDidMount() {
    initFb();
    initTwitter();
    initCopy(".share__shareable--permalink", () => `${this.props.shareable.url + "?utm_source=share_sheet%26utm_medium=copy_permalink"}`, () => {
      const confirmationNode = document.querySelector(".share__shareable-text-confirmation");
      confirmationNode.classList.add("share__shareable-text-confirmation--active");
      this.setState({ copied: true }, () => {
        try {
          this.props.onShare(ClientPlatform.Permalink);
        } catch (err) {}
      })
      setTimeout(() => {
        confirmationNode.classList.remove("share__shareable-text-confirmation--active");
      }, 5000);
    });
    this.initTapAndHoldListener();
  }

  public render() {
    return (
      <Sheet {...this.props.sheet}>
        <div className="share__pill-container sheet--resizable">
          <div className="share__pill" />
        </div>

        <div className="share__header sheet--resizable">
          <div className="share__title sheet--resizable">
            {this.props.title}
          </div>

          {_.isString(this.props.subtitle) && (
           <div className="share__subtitle sheet--resizable">
              {this.props.subtitle}
            </div>
          )}
        </div>

        <div className="share__shareables sheet--resizable">
          {!_.isEmpty(this.props.socials) && !_.isEmpty(this.props.shareable) && this.props.socials.map((platform) => (
           <a target="_blank" href={this.buildLink(platform)} className="share__shareable sheet--not-resizable" key={platform} onClick={this.props.onShare.bind(null, platform)}>
              <div className="share__shareable-image">
                <Image src={getImageSrc(this.props.imagePrefix, "${platform.toLowerCase()}.png")} />
              </div>

              <div className="share__shareable-text">
                {platform}
              </div>
            </a>
          ))}
          
          {!_.isEmpty(this.props.socials) && !_.isEmpty(this.props.clients) && (
            <div className="share__shareable-separator" />
          )}

          {!_.isEmpty(this.props.clients) && !_.isEmpty(this.props.shareable) && this.props.clients.map((client) => this.renderShareableClient(client))}
        </div>

        <div className="share__action">
          <Button type={ButtonType.Light} size={ButtonSize.Large} text="Close" onClick={this.props.onAction} />
        </div>
      </Sheet>
    );
  }

  private renderShareableClient = (client: ClientPlatform): React.ReactElement<HTMLDivElement | HTMLAnchorElement> => {
    switch (client) {
      case ClientPlatform.Permalink:
        return (
          <div className={`share__shareable share__shareable--${client.toLowerCase()} sheet--not-resizable`} key={client}>
            <div className="share__shareable-image">
              <Image src={getImageSrc(this.props.imagePrefix, `${client.toLowerCase()}.png`)} />
            </div>
            <div className="share__shareable-text">
              Copy to Clipboard
              <div className="share__shareable-text-confirmation">
                {this.state.copied && "Copied!"}
              </div>
            </div>
          </div>
        );
      case ClientPlatform.Raw:
        return (
          <a href={this.buildLink(client)} className={`share__shareable share__shareable--${client.toLowerCase()} sheet--not-resizable`} key={client} style={{ userSelect: "all" }}>
            <div className="share__shareable-image">
              <Image src={getImageSrc(this.props.imagePrefix, `${client.toLowerCase()}.png`)} />
            </div>
            <div className="share__shareable-text leading-wide">
               Tap & Hold for More Options
              <div className="share__shareable-subtext">
                {this.props.shareable.url}
              </div>
            </div>
          </a>
        );
      default:
        return (
          <a href={this.buildLink(client)} className={`share__shareable share__shareable--${client.toLowerCase()} sheet--not-resizable`} key={client} onClick={this.props.onShare.bind(null, client)}>
            <div className="share__shareable-image">
              <Image src={getImageSrc(this.props.imagePrefix, `${client.toLowerCase()}.png`)} />
            </div>
            <div className="share__shareable-text">
              {client}
            </div>
          </a>
        );
    }
  }

  private buildLink = (platform: SocialPlatform | ClientPlatform): string => {
    switch (platform) {
      case SocialPlatform.Twitter:
        return `https://twitter.com/intent/tweet?url=${encodeURI(this.props.shareable.url)}&text=${encodeURI(this.props.shareable.text)}`
      case SocialPlatform.Facebook:
        return `https://www.facebook.com/sharer/sharer.php?u=${encodeURI(this.props.shareable.url)}`;
      case ClientPlatform.Sms:
        if (device.ios()) {
          return `sms:&body=${this.props.shareable.url + "?utm_source=share_sheet%26utm_medium=sms"}`;
        }
        
        if (device.android()) {
          return `sms:?body=${this.props.shareable.url + "?utm_source=share_sheet%26utm_medium=sms"}`;
        }
      case ClientPlatform.Email:
        if (device.mobile()) {
          return `mailto:?subject=Photos from ${
            this.props.shareable.text
          }&body=<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head><body>View and download photos anytime: <a href='${
            this.props.shareable.url
          }%3Futm_source=share_sheet%26utm_medium=email%26utm_campaign=${this.props.shareable.url}'>${
            this.props.shareable.url
          }</a></body></html>`;
        } else {
          return `mailto:?subject=Photos from ${
            this.props.shareable.text
          }&body=View and download photos anytime: ${this.props.shareable.url}`;
        }
      case ClientPlatform.Permalink:
        return "#";
      case ClientPlatform.Raw:
      default:
        return `${this.props.shareable.url + "?utm_source=share_sheet%26utm_medium=tap_hold_share"}`;
    }
  }
   private initTapAndHoldListener = () => {
     const rawShareableNode = document.querySelector(".share__shareable--raw");

    if (_.isFunction(this.props.onShare) && rawShareableNode) {
      // @ts-ignore
      setImagePossiblyRevealedDownloadSheetListeners(rawShareableNode, () => {
        this.props.onShare(ClientPlatform.Raw);
      });
    }
   }
}