/* eslint-disable eqeqeq, jsx-a11y/anchor-is-valid, no-script-url */
import React, { Component } from "react"
import BoxContainer from "../box-container/container"
import { Toast, WhiteSpace } from "antd-mobile"
import { Popup } from "src/common/index"
import { connect } from "react-redux"
import Prizes from "src/components/activity/newyear-2019/common/prizes"
import BulletScreen from "src/components/activity/newyear-2019/common/user-bullet-screen"
import "./landing.scss"
import { browser, getParam, http, wxShare, SendMessageToApp } from "src/utils"
import QRCode from "qrcode"
import YearCourse from "../preheat/YearCourse"
import { FadeLoader } from "react-spinners"

class Landing extends Component {
  closeIcon =
    "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/close-btn.png"
  createTeamSuccessPopup = null
  joinSuccessPopup = null
  shareTipPopup = null
  swiper = null
  shareTitle = ""
  shareDesc = ""

  state = {
    teamData: {
      member: [],
    },
    origin: sessionStorage.getItem("isCaptain") ? 1 : getParam("origin"),
    treasure_code: getParam("treasure_code"),
    activityEnd: false,
    notices: [],
    rule: "",
    isCaptain: getParam("origin") == 1,
    isLoading: this.props.user.isFetching,
  }

  componentDidMount() {
    this.getStage()
    this.fetchPageData()
    window.showFollowAlert = this.remind.bind(this, "create")
    document.title =
      "AI充电季，开宝箱免费学AI爆款好课，300本程序员必备纸质书免费送，AI进阶宝典来就送！-七月在线"
    const landing = document.querySelector("#landing")
    const boxContainer = document.querySelector(".box-container")
    if (boxContainer.offsetHeight < window.innerHeight) {
      landing.style.minHeight = `${window.innerHeight}px`
      boxContainer.style.minHeight = `${window.innerHeight}px`
    }
  }

  componentDidUpdate(prevProps) {
    if (
      prevProps.user.hasError !== this.props.user.hasError &&
      !this.props.user.hasError
    ) {
      this.fetchPageData()
    }
    if (
      prevProps.user.isFetching !== this.props.user.isFetching &&
      !this.props.user.isFetching
    ) {
      this.setState({
        isLoading: this.props.user.isFetching,
      })
    }
  }

  componentWillUnmount() {
    this.shareTipPopup && this.shareTipPopup.remove()
  }

  // 获取活动以及宝箱的阶段
  getStage = () => {
    http.get(`${API.home}/activity/stage`).then((res) => {
      const { code, data, msg } = res.data
      if (code === 200) {
        if (Number(data.activity_stage) === 0) {
          this.props.history.push("/")
          return
        }
      } else {
        Toast.info(msg, 2)
      }
    })
  }

  createMeta = (title, dec, imgname) => {
    let meta = document.createElement("meta")
    meta.setAttribute("name", "description")
    meta.setAttribute("itemprop", "description")
    meta.setAttribute("content", dec)

    let meta2 = document.createElement("meta")
    meta2.setAttribute("itemprop", "name")
    meta2.setAttribute("content", title)

    let meta3 = document.createElement("meta")
    meta3.setAttribute("itemprop", "image")
    meta3.setAttribute("content", imgname)

    let head = document.getElementsByTagName("head")[0]
    head.appendChild(meta)
    head.appendChild(meta2)
    head.appendChild(meta3)
  }

  fetchPageData = ({
    origin = this.state.origin,
    treasure_code = this.state.treasure_code,
  } = {}) => {
    const { location } = this.props
    http
      .post(`${API.home}/sys/treasure/team`, {
        treasure_code,
        origin,
      })
      .then((res) => {
        const { data, code, msg } = res.data
        if (code == 200) {
          this.setState({
            teamData: data,
            isCaptain: sessionStorage.getItem("isCaptain")
              ? sessionStorage.getItem("isCaptain")
              : getParam("origin") == 1,
            activityEnd: data.status == 5,
          })

          this.setupWxShareConfig(data.member)

          if (browser.isWeixin) {
            wxShare({
              title: this.shareTitle,
              desc: this.shareDesc,
              link: `${window.location.origin}${
                location.pathname
              }?treasure_code=${getParam("treasure_code")}&origin=2`,
              imgUrl:
                "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png",
            })
            // history.replace(`${match.url}?treasure_code=${getParam('treasure_code')}&origin=2`)
          } else {
            this.createMeta(
              this.shareTitle,
              this.shareDesc,
              "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png"
            )
          }

          let searchParams = new URLSearchParams(window.location.search)
          if (searchParams.get("origin") === "1" && !browser.isWeixin) {
            searchParams.set("origin", "2")
            sessionStorage.setItem("isCaptain", "1")
            window.history.replaceState(
              null,
              "",
              `landing?${searchParams.toString()}`
            )
          }

          this.showSharePromptWithParam()
        } else {
          Toast.info(msg, 2, null, false)
        }
      })
  }

  setupWxShareConfig = (member) => {
    const len = member.length
    let count = 5 - len <= 0 ? 4 : 5 - len
    this.shareTitle = `还差${count}人即可开宝箱，100%有奖！`
    this.shareDesc =
      "加入我的队伍，机械键盘，纸质书籍等超多奖品等你拿！--七月在线"
  }

  showSharePromptWithParam = () => {
    if (
      sessionStorage.getItem("showShareTip") &&
      !sessionStorage.getItem("closedRemind")
    ) {
      this.showShareTip()
    }
  }

  joinTeam = () => {
    if (this.requiredLogin()) {
      return
    }
    const { treasure_code } = this.state
    http
      .post(`${API.home}/sys/treasure/joinTeam`, {
        treasure_code,
      })
      .then((res) => {
        const { data, code, msg } = res.data
        if (code === 200) {
          /*
           *  status
           *  1-成功加入
           *  2-成功加入组队成功
           *  3-已加入当前队伍
           *  4-已加入其他队伍
           * */

          switch (data.status) {
            case 1:
            case 2:
              this.joinSuccess(data)
              break
            default:
              Toast.info(msg, 2, null, false)
          }
        } else {
          Toast.info(msg, 2, null, false)
        }
      })
  }

  handleToMyTreasure = (id) => {
    this.joinSuccessPopup && this.joinSuccessPopup.remove()
    if (getParam("version")) {
      window.location.assign(
        `https://m.julyedu.com/year/yearTreasure?id=${id}&version=${getParam(
          "version"
        )}`
      )
    } else {
      window.location.assign(`https://m.julyedu.com/year/yearTreasure?id=${id}`)
    }
  }

  joinSuccess = ({
    id,
    status,
    my_team: { team_num, lack_member, is_team, treasure_code },
  }) => {
    this.joinSuccessPopup = Popup({
      title: (
        <div className={"join-success"}>
          <img
            src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/check-icon.png"
            alt=""
          />
          <div>成功加入队伍</div>
        </div>
      ),
      className: "landing-join-success-wrapper",
      content: (
        <div>
          <div className={"tip"}>
            {status === 2 ? (
              "组队成功，恭喜你获得一个宝箱！"
            ) : is_team ? (
              <>
                您的{<span>{team_num}</span>}号队伍还差
                {<span>{lack_member}</span>}人即可获得宝箱
              </>
            ) : (
              "自己当队长，宝箱内有专属奖品哦~"
            )}
          </div>
          {status === 2 ? (
            <img
              style={{ width: "150px", marginTop: "23px" }}
              src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/treasure-split.gif"
              alt=""
              onClick={this.handleToMyTreasure.bind(this, id)}
            />
          ) : is_team ? (
            <button
              type="button"
              onClick={this.inviteMembers.bind(this, treasure_code)}
            >
              继续组队
            </button>
          ) : (
            <button type="button" onClick={this.createMyTeam}>
              创建我的队伍
            </button>
          )}
        </div>
      ),
      closeIcon: this.closeIcon,
      close: () => {
        this.fetchPageData()
        this.getFollowStatus().then((isFollow) => {
          !isFollow && this.remind("join", this.state.treasure_code, 2)
        })
      },
    })
  }

  inviteMembers = (treasure_code) => {
    const { history, match, location } = this.props
    if (getParam("version")) {
      let data = {
        title: this.shareTitle,
        desc: this.shareDesc,
        link: `${window.location.origin}${location.pathname}?treasure_code=${treasure_code}&origin=2`,
        imgUrl:
          "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png",
      }
      SendMessageToApp("toShare", data)
    }
    sessionStorage.setItem("showShareTip", "1")
    history.replace(`${match.url}?treasure_code=${treasure_code}&origin=${1}`)
    this.createTeamSuccessPopup &&
      this.createTeamSuccessPopup.remove() &&
      (this.createTeamSuccessPopup = null)
    this.joinSuccessPopup &&
      this.joinSuccessPopup.remove() &&
      (this.joinSuccessPopup = null)
    this.fetchPageData({ treasure_code, origin: 1 })
    this.setState({
      isCaptain: true,
    })
  }

  getFollowStatus = () =>
    http.get(`${API.home}/sys/user/isFollowWeChat`).then((res) => {
      const { code, data } = res.data
      return code === 200 && data["is_follow"]
    })

  createTeamSuccess = ({ member, team_num, lack_member, treasure_code }) => {
    this.joinSuccessPopup &&
      this.joinSuccessPopup.remove() &&
      (this.joinSuccessPopup = null)
    this.getFollowStatus().then((isFollow) => {
      this.createTeamSuccessPopup = Popup({
        title: "创建成功",
        className: "landing-create-success",
        content: (
          <div>
            <div className="tip">
              {<span>{team_num}</span>}号队伍 还差{<span>{lack_member}</span>}
              名队员即可获得宝箱哦~
            </div>
            <img
              className={"treasure-box"}
              src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png"
              alt=""
            />
            <ul className="members">
              {new Array(5).fill("a").map((item, index) => {
                const _member = member[index]
                return (
                  <li key={index}>
                    {_member && _member["is_captain"] && <sup>队长</sup>}
                    <img
                      className={"avatar"}
                      src={
                        _member
                          ? _member["head_img"]
                          : "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/not-joined-placeholder.png"
                      }
                      alt=""
                    />
                  </li>
                )
              })}
            </ul>
            <button
              type={"button"}
              onClick={this.inviteMembers.bind(this, treasure_code)}
            >
              邀请好友加入队伍
            </button>
          </div>
        ),
        closeIcon: this.closeIcon,
        afterClose: () => {
          if (!isFollow) {
            this.remind("create", treasure_code)
          }
        },
      })
    })
  }

  // 安卓手机保存二维码
  saveImage = (url) => {
    let version = getParam("version")
    version =
      typeof version === "string"
        ? version.replace(".", "").replace(".", "").slice(0, 3)
        : ""
    if (version && parseInt(version) < 451) {
      Toast.info(
        "当前不支持此功能，升级到最新版本app可以点击保存二维码！",
        3,
        null,
        false
      )
    } else {
      SendMessageToApp("generateQRCode", url)
    }
  }

  remind = (type = "create", treasure_code, origin = 1) => {
    const { user } = this.props
    http
      .get(`${API["base-api"]}/wx/user_temporary_qrcode/${user.data.uid}`)
      .then((res) => {
        const { data } = res.data
        return data.url
      })
      .then((text) => {
        QRCode.toDataURL(text).then((url) => {
          Popup({
            title: "提醒服务",
            className: "landing-remind",
            closeIcon: this.closeIcon,
            content: (
              <div>
                <div className="des">
                  {type === "create"
                    ? "有好友加入队伍后第一时间通知我~"
                    : "获得宝箱时第一时间通知我~"}
                </div>
                <img src={url} alt="" />
                {browser.isAndroidApp ? (
                  <div>
                    <button
                      className={"android-qr-code-btn"}
                      onClick={this.saveImage.bind(this, text)}
                    >
                      保存二维码
                    </button>
                  </div>
                ) : null}
                <div className="des">
                  长按识别/扫码 关注【七月在线】服务号即可预约
                </div>
              </div>
            ),
            close: () => {
              // history.replace(`${match.path}?treasure_code=${treasure_code}&origin=1`)
              sessionStorage.setItem("closedRemind", "1")
              this.fetchPageData({
                treasure_code,
                origin,
              })
            },
          })
        })
      })
  }

  showShareTip = () => {
    const { user, location } = this.props
    if (browser.isAndroidApp || browser.isIOSApp) {
      SendMessageToApp("toShare", {
        title: this.shareTitle,
        desc: this.shareDesc,
        link: `${window.location.origin}${
          location.pathname
        }?treasure_code=${getParam("treasure_code")}&origin=2`,
        imgUrl:
          "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png",
      })
    } else {
      this.shareTipPopup = Popup({
        title: (
          <div>
            还差<span>{this.state.teamData.lack_member}</span>名队友即可获得宝箱
            快分享给好友吧~
          </div>
        ),
        className: `landing-share-tip ${browser.isWeixin ? "wechat" : ""}`,
        closable: false,
        close: () => {
          sessionStorage.removeItem("showShareTip")
          if (!user.hasError) {
            this.getFollowStatus().then((isFollow) => {
              !isFollow && this.remind("create", getParam("treasure_code"), 1)
            })
          }
        },
      })
    }
  }

  showOpenInBrowserTip = () => {
    Popup({
      title: <div>点击右上角，选择“在浏览器打开”</div>,
      className: "landing-open-in-browser-tip",
      closable: false,
    })
  }

  createMyTeam = () => {
    if (this.requiredLogin()) {
      return
    }
    http.get(`${API.home}/sys/treasure/createMyTeam`).then((res) => {
      const { data, code, msg } = res.data
      if (code == 200) {
        this.createTeamSuccess(data)
      } else {
        Toast.info(msg, 2, null, false)
      }
    })
  }

  requiredLogin = () => {
    const { history, user, location } = this.props
    if (user.hasError) {
      if (browser.isWeixin) {
        window.location.assign(
          `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=${encodeURIComponent(
            `${window.location.origin}${
              location.pathname
            }?treasure_code=${getParam("treasure_code")}&origin=${getParam(
              "origin"
            )}&aa=bb`
          )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
        )
      } else {
        history.push("/passport")
      }
      return true
    }
  }

  toSquare = () => {
    if (!getParam("version")) {
      window.location.assign("https://m.julyedu.com/year/yearindex")
    } else {
      window.location.assign(
        "https://m.julyedu.com/year/yearindex?version=" + getParam("version")
      )
    }
  }

  render() {
    const {
      teamData: {
        head_img,
        member,
        status,
        lack_member,
        team_num,
        prize_info,
        my_team,
        standby_plan,
      },
      activityEnd,
      isCaptain,
      isLoading,
    } = this.state
    /*
     * status
     * 1-自己的队伍
     * 2-未加入队伍
     * 3-已加入当前队伍
     * 4-已加入别的队伍
     * */
    return (
      <div id={"landing"}>
        {!(standby_plan && browser.isWeixin) && (
          <div id="to-square">
            <a href="javascript:" onClick={this.toSquare}>
              前往活动会场，享更多福利！ &gt;&gt;
            </a>
          </div>
        )}
        <BoxContainer>
          <i
            className={`snow-deco ${
              standby_plan && browser.isWeixin ? "standby" : ""
            }`}
          />
          {standby_plan && browser.isWeixin && (
            <>
              <WhiteSpace className={"standby-space"} />
              <div className={"standby-tip"}>
                点击右上角，选择“在浏览器打开”
              </div>
            </>
          )}
          <img className="main-avatar" src={head_img} alt="" />
          {status === 1 ? (
            <div className="des">邀请好友加入队伍，开宝箱领取丰厚奖品~</div>
          ) : (
            <div className="des">
              加入我的<span>{team_num}</span>号队伍，一起开宝箱领取丰厚奖品~
            </div>
          )}
          <Prizes showSystemNotices={false} />
          <BulletScreen />
          <div className="group">
            <ul className={"member"}>
              {member &&
                member.length &&
                new Array(5).fill("a").map((item, index) => {
                  const _member = member[index]
                  return _member ? (
                    <li key={index}>
                      <div className="avatar-wrapper">
                        {_member.is_captain ? <sup>队长</sup> : null}
                        <img src={_member.head_img} alt="" className="avatar" />
                      </div>
                    </li>
                  ) : (
                    <li key={index}>
                      <div className="avatar-wrapper">
                        <img
                          src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/default-member-avatar.png"
                          alt=""
                          className="avatar"
                        />
                      </div>
                    </li>
                  )
                })}
            </ul>
            <ul className={"bars"}>
              {member &&
                member.length &&
                new Array(5).fill("a").map((item, index) => {
                  return (
                    <li
                      key={index}
                      className={`${index < member.length ? "active" : ""}`}
                    />
                  )
                })}
            </ul>
            {status === 1 && !activityEnd && (
              <>
                <div className="group-des">
                  还差 {lack_member} 名队员即可获得当前宝箱哦~
                </div>
                {!(standby_plan && browser.isWeixin) && (
                  <button
                    type="button"
                    className={"invite-btn"}
                    onClick={this.showShareTip}
                  >
                    邀请好友加入队伍
                  </button>
                )}
              </>
            )}
            {status === 3 && !activityEnd && (
              <>
                <div className="group-des">
                  <p>已加入当前队伍</p>
                  {my_team["is_team"] ? (
                    <p>
                      您的{my_team["team_num"]}号队伍还差
                      {my_team["lack_member"]}人即可获得宝箱~
                    </p>
                  ) : (
                    <p>自己当队长，宝箱内有专属奖品哦~</p>
                  )}
                </div>
                {!(standby_plan && browser.isWeixin) &&
                  (my_team["is_team"] ? (
                    <button
                      type="button"
                      className={"invite-btn"}
                      onClick={this.inviteMembers.bind(
                        this,
                        my_team["treasure_code"]
                      )}
                    >
                      继续组队
                    </button>
                  ) : (
                    <button
                      type="button"
                      className={"invite-btn"}
                      onClick={this.createMyTeam}
                    >
                      创建我的队伍
                    </button>
                  ))}
              </>
            )}
            {status === 4 && !activityEnd && (
              <>
                <div className="group-des">
                  <p>已加入其他队伍</p>
                  {my_team["is_team"] ? (
                    <p>
                      您的{my_team["team_num"]}号队伍还差
                      {my_team["lack_member"]}人即可获得宝箱~
                    </p>
                  ) : (
                    <p>自己当队长，宝箱内有专属奖品哦~</p>
                  )}
                </div>
                {!(standby_plan && browser.isWeixin) &&
                  (my_team["is_team"] ? (
                    <button
                      type="button"
                      className={"invite-btn"}
                      onClick={this.inviteMembers.bind(
                        this,
                        my_team["treasure_code"]
                      )}
                    >
                      继续组队
                    </button>
                  ) : (
                    <button
                      type="button"
                      className={"invite-btn"}
                      onClick={this.createMyTeam}
                    >
                      创建我的队伍
                    </button>
                  ))}
              </>
            )}
            {!(standby_plan && browser.isWeixin) &&
              status === 2 &&
              !activityEnd && (
                <button
                  type="button"
                  className={"invite-btn"}
                  onClick={this.joinTeam}
                >
                  同意加入队伍
                </button>
              )}
            {prize_info &&
              prize_info.length !== 0 &&
              !activityEnd &&
              !isCaptain && (
                <div className="certainly-prompt">
                  第{prize_info[0].stage_no}个宝箱必中 {prize_info[0].name}
                </div>
              )}
            {activityEnd && (
              <div className="activity-end">
                <div>活动已结束</div>
                <div>关注【七月在线】服务号了解更多活动信息</div>
                <img
                  src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png"
                  alt=""
                />
                <div>长按识别 / 微信扫码</div>
              </div>
            )}
          </div>
        </BoxContainer>
        {!isCaptain && (
          <>
            <WhiteSpace size={"xl"} />
            <YearCourse getSum={() => {}} />
          </>
        )}
        {isLoading && (
          <div
            className="loading"
            style={{
              width: window.innerWidth + "px",
              height: window.innerHeight + "px",
            }}
          >
            <FadeLoader color={"#fff"} loading={isLoading} />
          </div>
        )}
      </div>
    )
  }
}

export default connect((state) => ({ user: state.user }), null)(Landing)
