import React, { useState } from "react"
import Select from "react-select"
import { Container } from "@/components"
import t from "@/constants/wording"
import {
  COMMUNITY_LINK_LIST,
  SLACK_LINK,
  EMAIL_LINK,
} from "@/constants/product"
import linuxSystemIcon from "@/assets/images/product/linux-system-icon.png"
import * as styles from "./index.module.scss"
import Markdown from "@/components/markdown"
import OutLink from "@/components/OutLink"
import {
  IOption,
  getPlatformOptions,
  SelectAttr,
} from "@/components/product/common"
import classNames from "classnames";
import { Link } from "gatsby"

interface IProps {
  data: ProductCommunityVersionInfos
}

const NewVersion: React.FC<IProps> = ({ data }) => {
  const [agree, setAgree] = useState<boolean>(false)
  const [warmShow, setWarmShow] = useState<boolean>(false)
  const operateAgree = () => {
    setAgree(flag => {
      setWarmShow(false)
      return !flag
    })
  }
  const [platform, setPlatform] = useState<string>()
  const [platformValue, setPlatformValue] = useState<IOption>()
  const handleClickDownload = (name: 'server'|'toolkit') => {
    if (!agree) {
      setWarmShow(true)
      return false
    } else if (platform == null) {
      setShowSelectPlatformPrompt(true)
      return false
    } else {
      if (platform === "arm") {
        if (name === "server") window.open(data.serverLinkArm)
        else window.open(data.toolkitLinkArm)
      } else {
        if (name === "server") window.open(data.serverLink)
        else window.open(data.toolkitLink)
      }
    }
  }

  const [showSelectPlatformPrompt, setShowSelectPlatformPrompt] = useState(false)

  const getValue = (list: ProductCommunityVersionInfos) => ({
    label: list.version,
    value: list.id,
    serverLink: list.serverLink,
    toolkitLink: list.toolkitLink,
    serverLinkArm: list.serverLinkArm ?? "",
    toolkitLinkArm: list.toolkitLinkArm ?? "",
    manualChinese: list.manualChinese ?? "",
    manualEnglish: list.manualEnglish ?? "",
  })

  return (
    <div className={styles.newVersion}>
      <Container isSmall={true}>
        <h2>TiDB {data.version.replace(/[^\d]+(\d+.\d+.\d+)/, "$1")}</h2>
        {data.description && (
          <Markdown className={styles.description} body={data.description} />
          //<p className={styles.description}>{data.description}</p>
        )}
        {data.feature && data.feature.length > 0 && (
          <ul className={styles.advantage}>
            {data.feature.map(list => (
              <li key={list.id}>{list.description}</li>
            ))}
          </ul>
        )}
        <div className={styles.choicePlatform}>
          <p>选择架构</p>
          <div>
            <Select
              {...SelectAttr}
              //className={styles.choicePlatform_select}
              instanceId="platformValue"
              value={platformValue}
              options={getPlatformOptions(getValue(data))}
              onChange={(value) => {
                setShowSelectPlatformPrompt(false)
                setPlatform(value?.value)
                setPlatformValue(value)
              }}
            />
          </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">PingCAP 社区软件许可协议</Link>*/}
            {/*<span>与</span>*/}
            <Link to="/privacy-policy/">{t("PingCap Privacy Agreement")}</Link>
          </p>
        </div>
        <div className={styles.softwarePackage}>
          <div className={styles.softwarePackageInner}>
            <div>
              <h5>TiDB-community-server {t("software package")}</h5>
              <p>
                {t("get TiDB to install the offline package with one click")}
              </p>
            </div>
            <OutLink
              className={classNames("button is-normal", styles.download_button)}
              id="download-TiDB-community-server"
              onClick={() => handleClickDownload("server")}
            >
              {t("download now")}
            </OutLink>
          </div>
        </div>
        <div className={styles.softwarePackage}>
          <div className={styles.softwarePackageInner}>
            <div>
              <h5>TiDB-community-toolkit {t("software package")}</h5>
              <p>{t("get the TiDB toolkit")}</p>
            </div>
            <OutLink
              className={classNames("button is-normal", styles.download_button)}
              id="download-TiDB-community-toolkit"
              onClick={() => handleClickDownload("toolkit")}
            >
              {t("download now")}
            </OutLink>
          </div>
        </div>
        {warmShow && (
          <p className={styles.warm}>
            * {t("warm prompt")}：
            {t(
              "You must agree to the PingCap Privacy Agreement."
            )}
          </p>
        )}
        {showSelectPlatformPrompt && (
          <p className={styles.warm}>* {t("warm prompt")}：请选择架构</p>
        )}
        <p className={styles.support}>
          <div className={styles.support_os}>
            <img
              src={linuxSystemIcon}
              alt={t("Supported operating system: Linux")}
            />
            {t("Supported operating system: Linux")}
          </div>
          <div className={styles.support_manual}>
            {data.manualChinese && (
              <div className={styles.support_manual_Chinese}>
                <OutLink href={data.manualChinese}>中文手册</OutLink>
              </div>
            )}
            {data.manualEnglish && (
              <div className={styles.support_manual_English}>
                <OutLink href={data.manualEnglish}>英文手册</OutLink>
              </div>
            )}
          </div>
        </p>
        <ul className={styles.linkList}>
          {COMMUNITY_LINK_LIST.map((item, k) => (
            <li key={k}>
              <a href={item.link} target="_black">
                {item.name}
              </a>
            </li>
          ))}
          <li>
            <div className={styles.tooltipLi}>
              <a>{t("Contact us via Slack or email")}</a>
              <div className={styles.tooltip}>
                <div className={styles.tooltipInner}>
                  <a href={SLACK_LINK} target="_black">
                    Slack
                  </a>
                  <a href={EMAIL_LINK} target="_black">
                    {t("email")}
                  </a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </Container>
    </div>
  )
}

export default NewVersion