import * as React from "react"
import styled from "styled-components"
import { getConfig } from "jamplay-common/remote-config"
import {
  shareContentToSocialMedia,
  SocialMediaShareContentType,
  SocialMediaProviderEnum
} from "jamplay-common/client/share"

import withTranslate from "jamplay-common/i18n/withTranslate"

const copy = require("copy-to-clipboard")

/**
 * Implement this Component
 * to have ability to share everying
 * it receive
 */

const SocialPanelStyleContainer = styled.div.attrs({
  className: "SocialPanel"
})`
  .SocialPanel__icon {
    width: 30px;
    height: 30px;
    background-size: contain;
    background-position: center center;
    margin-right: 8px;
    &:nth-last-child(1) {
      margin-right: 0px;
    }

    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
  .SocialPanel__icon-wrapper {
    display: flex;
  }
  .SocialPanel__label {
    color: ${(props) => props.theme.grey};
    font-size: 0.8rem;
    margin-bottom: 3px;
  }
`

type SocialPanelPropTypes = {
  contentId: string
  contentType: SocialMediaShareContentType
  shareURL?: string
}

export function createNewURLFromPathname(pathname: string) {
  try {
    const host = new URL(window.location.origin)
    const url = new URL(pathname, host)
    return url.toString()
  } catch (e) {
    console.error(pathname, "is invalid")
    return ""
  }
}

function handleOnSocialMediaClick(params: {
  payload: {
    id: string
    type: SocialMediaShareContentType
    shareProvider: SocialMediaProviderEnum
  }
}) {
  return () => {
    shareContentToSocialMedia({
      payload: {
        ...params.payload,
        origin: window.location.href
      }
    })
  }
}

const SocialItem = ({
  shareParams,
  shareProvider,
  iconImageURL
}: {
  iconImageURL: string
  shareParams: any
  shareProvider: SocialMediaProviderEnum
}) => {
  const staticFolder = getConfig().publicRuntimeConfig.staticFolder || ""
  return (
    <div
      className="SocialPanel__icon"
      style={{
        backgroundImage: `url(${staticFolder || ""}${iconImageURL})`
      }}
      onClick={handleOnSocialMediaClick({
        payload: {
          ...shareParams,
          shareProvider
        }
      })}
    />
  )
}

export const SocialPanel: React.SFC<SocialPanelPropTypes> = (
  props: SocialPanelPropTypes & withTranslatePropType
) => {
  const staticFolder = getConfig().publicRuntimeConfig.staticFolder || ""
  let { t } = props
  if (!t) {
    t = (s) => s
  }

  const shareParams: any = {
    id: props.contentId,
    type: props.contentType
  }

  const copyLink = () => {
    const shareURL = props.shareURL
      ? createNewURLFromPathname(props.shareURL)
      : window.location.href
    copy(shareURL)
    alert("link copied!")
  }
  return (
    <SocialPanelStyleContainer>
      <div
        className="SocialPanel__label heavent"
        dangerouslySetInnerHTML={{ __html: t("share-panel") }}
      />
      <div className="SocialPanel__icon-wrapper">
        <SocialItem
          shareProvider={SocialMediaProviderEnum.FACEBOOK}
          shareParams={shareParams}
          iconImageURL={"/ui-assets/images/share-facebook.png"}
        />
        <SocialItem
          shareProvider={SocialMediaProviderEnum.TWITTER}
          shareParams={shareParams}
          iconImageURL={"/ui-assets/images/share-twitter.png"}
        />
        <SocialItem
          shareProvider={SocialMediaProviderEnum.LINE}
          shareParams={shareParams}
          iconImageURL={"/ui-assets/images/share-line.png"}
        />
        <div
          className="SocialPanel__icon"
          onClick={copyLink}
          style={{
            backgroundImage: `url(${staticFolder ||
              ""}/ui-assets/images/share-link.png)`
          }}
        />
      </div>
    </SocialPanelStyleContainer>
  )
}

export default withTranslate(SocialPanel) as React.SFC<SocialPanelPropTypes>