import * as React from "react"
import SocialLink from "../SocialLink"
import withTranslate from "jamplay-common/i18n/withTranslate"
import styled from "styled-components"
import breakpoint from "styled-components-breakpoint"

const defaultLink = styled.a`` as any

const FooterContainer = styled.div`
  color: #979797;
  background: ${(props) => props.theme.matteWhite};
  a.footer-link {
    font-size: 14px;
    text-decoration: none;
    color: #979797;
    padding: 0 !important;
    font-weight: 300 !important;
    cursor: pointer;
    margin-right: 0 !important;
    &:after {
      content: '|';
      margin: 0 5px;
    }
    &:nth-last-child(1) {
      &:after {
        content: '';
        margin: 0;
      }
    }
  }
`
const Row = styled.div.attrs({
  className: "layout-container"
})`
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  margin: 8px 0;
  justify-content: flex-start;
  @media screen and (max-width:768px){
    flex-direction: column;
    align-items: flex-start;
  }
`
const UL = styled.ul`
  list-style-type: none;
  margin: 0;
  padding: 0;
  //overflow: hidden;

  @media screen and (max-width:768px){
  list-style-type: disc;
  padding-left: 20px;
  }
`

const LI = styled.li`
  float: left;
  padding-right: 10px;
  @media screen and (max-width:768px){
    float: none;
    border-right: none;
  }
`

const LineLI = styled.li`
  float: left;
  padding-right: 10px;
  @media screen and (max-width:768px){
   display:none;
  }
`

const LegacyFooterContainer = styled.div.attrs({
  className: "layout-container"
})`
  display: flex;
  ${breakpoint("mobile")`
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  `}
  ${breakpoint("tablet")`
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  `}
  margin: auto;
  .facebook-page {
    width: 270px;
    ${breakpoint("mobile")`
      margin: auto;
    `}
    ${breakpoint("tablet")`
      margin: 0;
    `}
  }
`
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
class Footer extends React.Component<any> {
  public state = {
    isMount: false
  }
  public componentDidMount() {
    this.setState({
      isMount: true
    })
    if (!window.document.getElementById("fb-root")) {
      const elem = document.createElement("div")
      elem.id = "fb-root"
      document.body.appendChild(elem)
    }
    (function initFacebookPage(d, s, id) {
      let js
      if (d.getElementById(id)) { return }
      js = d.createElement(s); js.id = id
      js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"
      const head: any = document.getElementsByTagName("head")[0]
      head.appendChild(js)
    }(document, "script", "facebook-jssdk"))
    async function init(_window: any) {
      let c = 20
      while (!_window.FB || window.document.getElementsByClassName("fb-page").length < 1) {
        if (c <= 0) {
          console.error("cant init facebook page plugin")
          return
        }
        c--
        await delay(500)
      }
      _window.FB.XFBML.parse()
    }
    init(window)
  }
  public render() {
    const Link = this.props.Link || defaultLink
    return (
      <FooterContainer className="heavent" style={{ padding: "18px 0", ...this.props.style }}>
        <LegacyFooterContainer>
          <div>
            <Row>
              <div className="nav-list">
                <UL>
                  <LI>
                    <Link className="footer-link" href="/page/about-us">
                      {this.props.t("about-us")}
                    </Link>
                  </LI>
                  <LineLI>|</LineLI>
                  <LI>
                    <Link className="footer-link" href="/page/about-jelly">
                      {this.props.t("about-jelly")}
                    </Link>
                  </LI>
                  <LineLI>|</LineLI>
                  <LI>
                    <Link className="footer-link" href="/page/manual">
                      {this.props.t("manual")}
                    </Link>
                  </LI>
                  <LineLI>|</LineLI>
                  <LI>
                    <Link className="footer-link" href="/page/join-editor">
                      {this.props.t("join-editor")}
                    </Link>
                  </LI>
                  <LineLI>|</LineLI>
                  <LI>
                    <Link className="footer-link" href="/page/terms">
                      {this.props.t("term-condition")}
                    </Link>
                  </LI>
                  <LineLI>|</LineLI>
                  <LI>
                    <Link className="footer-link" href="/page/privacy-policy">
                      {this.props.t("privacy-policy")}
                    </Link>
                  </LI>

                </UL>
              </div>
            </Row>
            <Row>
              <div style={{ padding: "12px 0", fontWeight: "bold" }}>
                <a className="footer-link" href="mailto:play@jamplay.world">{"ติดต่อเรา : play@jamplay.world"} </a>
              </div>
            </Row>
            <Row><div style={{ marginLeft: -10, marginBottom: 10 }}><SocialLink/></div></Row>
            <Row className="footer-link" style={{fontSize: "12.8px"}} >
              {this.props.t("copyright")}<br />
            </Row>
          </div>
          {
            /* tslint:disable:max-line-length */
            this.state.isMount && <div
              className="facebook-page"
              dangerouslySetInnerHTML={{
                __html: `
                <div class="fb-page"
                  data-href="https://www.facebook.com/JamPlay.World/"
                  data-tabs="timeline"
                  data-width="270"
                  data-height="200"
                  data-small-header="false"
                  data-adapt-container-width="true"
                  data-hide-cover="false"
                  data-show-facepile="true">
                    <blockquote cite="https://www.facebook.com/JamPlay.World/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/JamPlay.World/">JamPlay</a></blockquote>
                </div>
                `
              }}
            />
            /* tslint:enable:max-line-length */
          }
        </LegacyFooterContainer>
      </FooterContainer>
    )
  }
}

export default withTranslate(Footer)