import React, { useEffect, useMemo, useState } from "react"
import Select from "react-select"
import { Container } from "@/components"
import t from "@/constants/wording"
import * as styles from "../new-version/index.module.scss"
import OutLink from "@/components/OutLink"
import {
  IOption,
  getPlatformOptions,
  SelectAttr, VersionOption,
} from "@/components/product/common"
import classNames from "classnames";
import { getQueryStringParams } from "@/utils"
import { Link } from "gatsby"

interface IProps {
  data: ProductCommunityVersionInfos[]
}

type TSoftwarePackage = "serverLink" | "toolkitLink"

const HistoryVersion: React.FC<IProps> = ({ data }) => {
  const versionOptions: VersionOption[] = data.map(list => ({
    label: list.version,
    value: list.id,
    serverLink: list.serverLink,
    toolkitLink: list.toolkitLink,
    serverLinkArm: list.serverLinkArm ?? "",
    toolkitLinkArm: list.toolkitLinkArm ?? "",
    manualChinese: list.manualChinese ?? "",
    manualEnglish: list.manualEnglish ?? "",
  }))

  const [versionValue, setVersionValue] = useState<VersionOption>()
  const [softwarePackage, setSoftwarePackage] = useState<TSoftwarePackage>()
  const [agree, setAgree] = useState<boolean>(false)
  const [warmText, setWarmText] = useState<string>("")

  useEffect(() => {
    const qs = getQueryStringParams()
    const version = qs.version as string
    const versionValue = versionOptions.filter((value) => (value.label === version))?.[0]
    //console.log({qs, version, versionValue})
    setVersionValue(versionValue)
  }, [])

  const changeVersionValue = (list: VersionOption) => {
    setVersionValue(list)
    setWarmText("")
  }

  const changeSoftwarePackage = (type: TSoftwarePackage) => {
    setSoftwarePackage(type)
    setWarmText("")
  }

  const [platformValue, setPlatformValue] = useState<IOption>()

  const changePlatformValue = (list: VersionOption) => {
    setPlatformValue(list)
    setWarmText("")
  }

  const operateAgree = () => {
    setAgree(flag => {
      setWarmText("")
      return !flag
    })
  }

  const downloadPackage = () => {
    let text = ""
    if (!versionValue) {
      text += "；" + t("please choice version")
    }

    if (!softwarePackage) {
      text += "；" + t("please choice software package")
    }

    if (!platformValue) {
      text += "；" + "请选择架构"
    }

    if (!agree) {
      text += "；" + t("You must agree to the PingCap Privacy Agreement.")
    }

    if (text) {
      setWarmText(text.substr(1))
      return
    }
  }

  const downloadButtonProps = useMemo(() => {
    if (agree && versionValue && softwarePackage && platformValue) {
      const href = versionValue[softwarePackage + (platformValue.value === "arm" ? "Arm" : "")]
      return {
        href,
      }
    } else {
      return {
        onClick: downloadPackage,
      }
    }
  }, [versionValue, softwarePackage, platformValue, downloadPackage])

  return (
    <div className={styles.historyVersion} id={'version-list'}>
      <Container isSmall={true}>
        <h2>{t("Historical version download")}</h2>
        <div className={styles.choice}>
          <div className={styles.choiceVersion}>
            <p>{t("choice version")}</p>
            <div>
              <Select
                {...SelectAttr}
                instanceId="versionValue"
                value={versionValue}
                options={versionOptions}
                onChange={o => o && changeVersionValue(o)}
              />
            </div>
          </div>
          <div className={styles.choiceVersion}>
            <p>选择架构</p>
            <div>
              <Select
                {...SelectAttr}
                instanceId="versionValue"
                value={platformValue}
                options={getPlatformOptions(versionValue)}
                onChange={changePlatformValue}
                noOptionsMessage={() => "请先选择版本"}
              />
            </div>
          </div>
          <div className={styles.support_manual}>
            {versionValue && versionValue?.manualChinese.length !== 0 && (
              <div className={styles.support_manual_Chinese}>
                <OutLink href={versionValue.manualChinese}>中文手册</OutLink>
              </div>
            )}
            {versionValue && versionValue?.manualEnglish.length !== 0 && (
              <div className={styles.support_manual_English}>
                <OutLink href={versionValue.manualEnglish}>英文手册</OutLink>
              </div>
            )}
          </div>
        </div>
        <div className={styles.choiceVersion}>
          <p>{t("choice software package")}</p>
          <div className={styles.choiceSoftwarePackage}>
            <label onClick={() => changeSoftwarePackage("serverLink")}>
              <span
                className={`${styles.radio} ${
                  softwarePackage === "serverLink" ? styles.active : ""
                }`}
              ></span>
              <div>
                <h5>TiDB-community-server {t("software package")}</h5>
                <p>
                  {t("get TiDB to install the offline package with one click")}
                </p>
              </div>
            </label>
            <label onClick={() => changeSoftwarePackage("toolkitLink")}>
              <span
                className={`${styles.radio} ${
                  softwarePackage === "toolkitLink" ? styles.active : ""
                }`}
              ></span>
              <div>
                <h5>TiDB-community-toolkit {t("software package")}</h5>
                <p>{t("get the TiDB toolkit")}</p>
              </div>
            </label>
          </div>
        </div>
        <div className={styles.agree}>
          <p>
            <i
              className={`iconfont ${
                agree ? "icon-checkbox-active" : "icon-checkbox-normal"
              }`}
              onClick={() => operateAgree()}
            ></i>
            <span>我同意</span>{" "}
            {/*<Link to="/licenses">*/}
            {/*  {t("PingCap Community Software License Agreement")}*/}
            {/*</Link>*/}
            {/*<span>{t("and")}</span>*/}
            <Link to="/privacy-policy/">{t("PingCap Privacy Agreement")}</Link>
          </p>
        </div>
        <div className={styles.btnContent}>
          <OutLink
            className={classNames("button is-normal", styles.download_button)}
            id="download-TiDB-community-history"
            {...downloadButtonProps}
          >
            {t("download now")}
          </OutLink>
        </div>
        {warmText && (
          <p className={styles.warm}>
            * {t("warm prompt")} ：<span>{warmText}</span>
          </p>
        )}
      </Container>
    </div>
  )
}

export default HistoryVersion