import React, { useState } from "react"
import Seo from "@/components/seo"
import { BannerResponsible} from "@/components"
import Markdown from "@/components/markdown"
import Layout from "@/components/layout"
import * as styles from "./index.module.scss"
import BackgroundContainer from "@/components/BackgroundContainer"
import OutLink from "@/components/OutLink"
import classnames from "classnames";
import ContactForm from "@/components/contact-form";
import classNames from "classnames";
import CommunityResources from "@/components/community-resources";
import VideoCard from "@/components/video-card";
import VideoPlayer from "@/components/video-play";

interface IProps {
  //data: {
  //  allStrapiSolutions: {
  //    nodes: RelatedCard[]
  //  }
  //}
}

const seoTitle = "TiDB 6.0 重磅发布"
const seoDescription = "TiDB 是面向企业级和云的数据库，新版本 TiDB 6.0 大幅加强 TiDB 作为企业级产品的可管理性，具备更成熟的 HTAP 与容灾能力，加入多项云原生数据库所需的基础特性。PingCAP 现面向企业用户和开发者，开放优先试用名额，您将有机会抢先体验包括 TiDB 6.0 在内的多款新品与服务。"
const seoKeywords = "TiDB,企业级数据库,HTAP,TiFlash,TiDB Cloud,数据库管理平台,荣誉体验官".split(",")
const bannerPcImageUrl = "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_banner_pc_222782f4ef.svg"
const bannerMobileImageUrl = "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_banner_mobile_89ef15f2c7.jpg"

const trialUrl = "https://forms.pingcap.com/f/BookRush?utm_source=website-zh&utm_medium=cta&utm_campaign=book-rush"
const moreFeatureLink = "https://docs.pingcap.com/zh/tidb/v6.0/release-6.0.0-dmr"

export default function Page(props: IProps) {
  const {
    //data: { allStrapiSolutions },
  } = props

  const [isOpen, setIsOpen] = useState(false)
  const handleOpen = () => {
    document.getElementsByTagName("html")[0].style.overflow = "hidden"
    setIsOpen(true)
  }
  const handleClose = () => {
    document.getElementsByTagName("html")[0].style.overflow = ""
    setIsOpen(false)
  }

  return (
    <Layout>
      <Seo
        title={seoTitle}
        description={seoDescription}
        keywords={seoKeywords}
      />
      <BannerResponsible image={bannerPcImageUrl} imageMobile={bannerMobileImageUrl} link={trialUrl} />
      <Summary />
      <Feature />
      <TiEM />
      <Experience />
      <Resource />
      <ContactForm
        isOpen={isOpen}
        handleOpen={handleOpen}
        handleClose={handleClose}
      />
    </Layout>
  )
}

const Summary: React.FC = () => {
  const summary = `TiDB 是面向企业级和云的数据库，新版本 TiDB 6.0 大幅加强 TiDB 作为企业级产品的可管理性，具备更成熟的 HTAP 与容灾能力，加入多项云原生数据库所需的基础特性。TiDB 6.0 版本总计修复 137 个功能，融入 77 个真实严苛场景带来的功能增强。`
  return (
    <BackgroundContainer className={styles.summary}>
      <Markdown body={summary} needAnchor={false} />
    </BackgroundContainer>
  )
}

const Feature = () => {
  const features = [
    {
      title: "全面加强可管理性",
      description: "灵活易用，降低技术选择背后的隐性成本",
      items: [
        "引入数据调度框架",
        "新增 TiDB 企业级数据库管理平台（TiEM）",
        "开放智能诊断服务 PingCAP Clinic 预览",
      ],
      iconUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_feature_1_icon_f9df39a504.png",
      backgroundImageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_feature_1_background_846074491f.svg",
    },
    {
      title: "更成熟的 HTAP 能力",
      description: "TPC-C 性能较 5.0 版本提升 76.32%",
      items: [
        "支持更多算子和函数",
        "引入更优的线程模型",
        "极高读写混合负载下的并发能力提升 50%-100%",
      ],
      iconUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_feature_2_icon_fa7ee3a7f8.png",
      backgroundImageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_feature_2_background_13b9dd74fd.svg",
    },
    {
      title: "强化的容灾能力",
      description: "TiCDC 核心能力增强， 99.9% 数据延迟低于 10 秒",
      items: [
        "优化增量数据的多个处理流程",
        "新增主集群事务日志扫描的限流",
      ],
      iconUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_feature_3_icon_846bbb7990.png",
      backgroundImageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_feature_3_background_39205ccfda.svg",
    }
  ]
  return (
    <BackgroundContainer className={styles.feature}>
      <h2 className={styles.feature_title}>TiDB 6.0 新特性概览</h2>
      <div className={styles.feature_list}>
        {features.map((value, index) => {
          return (
            <div key={index} className={styles.feature_list_item} style={{backgroundImage: `url(${value.backgroundImageUrl})`}}>
              <div className={styles.feature_list_item_title}>
                {value.title}
              </div>
              <div className={styles.feature_list_item_icon}>
                <img src={value.iconUrl} alt={value.title} />
              </div>
              <div className={styles.feature_list_item_description}>
                {value.description}
              </div>
              <div className={styles.feature_list_item_items}>
                <ul>
                  {value.items.map((value, index) => {
                    return <li key={index}>{value}</li>
                  })}
                </ul>
              </div>
            </div>
          )
        })}
      </div>
      <div className={styles.feature_button}>
        <OutLink className={classnames("button is-primary", styles.opinion_action_button_blue)} href={trialUrl}>
          抢先试用
        </OutLink>
      </div>
      <div className={styles.feature_link}>
        <OutLink className={classnames(styles.opinion_action_button_blue)} href={moreFeatureLink}>
          探索更多新特性
        </OutLink>
      </div>
    </BackgroundContainer>
  )
}

const TiEM = () => {
  const title = "TiDB 企业级数据库管理平台（TiEM）"
  const description = "TiDB 企业级数据库管理平台（TiEM） ，提供 TiDB 数据库可视化管理体验，提升运维效率，降低运维成本"
  const imageUrl = "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_tiem_0e31f89300.svg"
  const videoCoverUrl = "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tiem_video_cover_34da1c6268.png"
  const videoUrl = "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/Ti_EM_Demo_142acb3a0f.mp4"
  const [modalShow, setModalShow] = React.useState(false)
  const videoModalShow = () => setModalShow(!modalShow)
  return (
    <BackgroundContainer hasBackgroundColor className={styles.tiem}>
      <h2 className={styles.tiem_title}>
        {title}
      </h2>
      <div className={styles.tiem_description}>
        {description}
      </div>
      <div className={styles.tiem_image}>
        <img src={imageUrl} alt={title} />
      </div>
      <div className={styles.tiem_button}>
        <OutLink className={classnames("button is-primary", styles.opinion_action_button_blue)} href={trialUrl}>
          抢先试用
        </OutLink>
      </div>
      <div className={styles.tiem_video}>
        <VideoCard url={videoUrl} image={{ media: { url: videoCoverUrl, width: 2000, height: 745 } }} title="TiDB 企业级数据库管理平台 功能演示" backgroundColor={"rgba(0,0,0,50%)"} />
        <VideoPlayer link={videoUrl} close={videoModalShow} play={modalShow} />
      </div>
    </BackgroundContainer>
  )
}

const Experience = () => {
  const title = "TiDB 6.0 抢先试用"
  const description = "PingCAP 现面向企业用户和开发者，开放优先试用名额，您将有机会抢先体验包括 TiDB 6.0 在内的多款新品与服务。"
  const date = "活动时间：即日起至 2022 年 6 月 30 日*"
  const detailUrl = "https://asktug.com/t/topic/663914"
  const products = [
    {
      title: "TiDB 6.0 一栈式实时 HTAP 数据库",
      scene: "适用于企业用户联机交易与实时分析业务场景",
      description: "TiDB 是一款企业级开源分布式数据库，具备水平扩容或者缩容、金融级高可用、实时 HTAP、云原生、兼容 MySQL 协议和生态等特性，TiDB 6.0 在可管理性、HTAP 能力、容灾能力等方面实现全面升级。",
      linkLabel: "了解更多",
      linkUrl: "https://docs.pingcap.com/zh/tidb/v6.0/",
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_experience_1_icon_9b99316ff6.png",
    },
    {
      title: "TiDB 分析引擎 TiFlash",
      scene: "适用于企业用户实时分析业务场景",
      description: "TiFlash 具备 MPP 能力，提供事务性数据的实时分析，在行业用户的风控、反欺诈、实时数据中台、实时数仓等场景拥有丰富的应用案例，于 2022 年 4 月 1 日正式开源。",
      linkLabel: "了解更多",
      linkUrl: "https://github.com/pingcap/tiflash",
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_experience_2_icon_53d56207af.png",
    },
    {
      title: "TiDB 企业级数据库管理平台  （TiEM）",
      scene: "适用于已部署 TiDB 的企业用户",
      description: "TiDB 企业级数据库管理平台（ TiEM），基于 WEB 端实现多套 TiDB 集群全生命周期的可视化管理，支持私有和公有云部署，有效提升 TiDB 集群运维效率，降低运维成本。",
      linkLabel: "了解更多",
      linkUrl: "https://asktug.com/t/topic/663863",
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_experience_3_icon_97079ed948.png",
    },
    {
      title: "PingCAP Clinic 诊断服务（Technical Preview 版）",
      scene: "适用于已部署 TiDB 的企业用户",
      description: "PingCAP Clinic 诊断服务是为 TiDB 集群提供的诊断服务，支持进行远程定位集群问题和本地快速检查集群状态，用于从全生命周期确保 TiDB 集群稳定运行、预测可出现的集群问题、降低问题出现概率、快速定位并修复问题。",
      linkLabel: "了解更多",
      linkUrl: "https://clinic-docs.vercel.app/docs/",
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_experience_4_icon_1f4795ab37.png",
    },
    //{
    //  title: "TiDB Cloud Dev Tier",
    //  scene: "适用于中国出海企业和开发者",
    //  description: "TiDB 是一款企业级开源分布式数据库，具备水平扩容或者缩容、金融级高可用、实时 HTAP、云原生、兼容 MySQL 协议和生态等特性，TiDB 6.0 在可管理性、HTAP 能力、容灾能力等方面实现全面升级。",
    //  linkLabel: "立即注册",
    //  linkUrl: "https://tidbcloud.com/signup",
    //  imageUrl: "#",
    //},
  ]
  const gifts = [
    {
      index: "权益一",
      color: "#7246A3",
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_experience_gitf_1_2d405cc16f.svg",
      title: "TiDB 社区积分",
      //description: "报名成功即可获得 TiDB 社区最新定制周边一份。",
    },
    {
      index: "权益二",
      color: "#D38E31",
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_experience_gitf_2_7be6dc7254.svg",
      title: "PingCAP DevCon 2022 门票 + TiDB 社区积分和定制移动电源",
      //description: "完成一款产品试用和反馈，即可获得 PingCAP DevCon 2022 门票一张。",
    },
    {
      index: "权益三",
      color: "#363EA2",
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_experience_gitf_3_ff7085345d.svg",
      title: "TiDB 社区积分和定制键盘",
      //description: "",
    },
    {
      index: "权益四",
      color: "#E67275",
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/tidb_6_0_release_campaign_experience_gitf_4_75f791b6d3.svg",
      title: "Apple Watch 7（限额十名）",
      //description: "完成一款产品的试用和反馈，并撰写体验文章，由 TiDB 社区评选前十名，将在 PingCAP DevCon 2022 现场颁发荣誉和奖品（Apple Watch 7）",
    },
  ]
  const declaration = "*需要在活动期间完成产品试用、反馈和体验文章撰写，活动最终解释权归 PingCAP 所有。"
  return (
    <BackgroundContainer className={styles.experience}>
      <h2 className={styles.experience_title}>
        {title}
      </h2>
      <div className={styles.experience_description}>
        {description}
      </div>
      <div className={styles.experience_products}>
        {products.map((value, index) => {
          return (
            <div key={index} className={styles.experience_products_item} style={{flexDirection: index % 2 == 1 ? "row-reverse" : "row"}}>
              <div className={styles.experience_products_item_content}>
                <div className={styles.experience_products_item_content_title}>
                  {value.title}
                </div>
                <div className={styles.experience_products_item_content_scene}>
                  {value.scene}
                </div>
                <div className={styles.experience_products_item_content_description}>
                  {value.description}
                </div>
                <div className={styles.experience_products_item_content_link}>
                  <OutLink href={value.linkUrl}>{value.linkLabel}</OutLink>
                </div>
              </div>
              <div className={styles.experience_products_item_image}>
                <img src={value.imageUrl} alt={value.title} />
              </div>
            </div>
          )
        })}
      </div>
      <div className={styles.experience_date}>
        {date}
      </div>
      <div className={styles.experience_steps}>
        <p>
          活动流程：
        </p>
        <p>
          Step 1：填写试用表单，报名成功即可获得权益一；
        </p>
        <p>
          Step 2：完成一款产品试用并成功提交试用反馈，即可获得权益二；
        </p>
        <p>
          Step 3：为了帮助全球更多的 TiDB 开发和使用者，TiDB 社区特别推出 TiDB 6.0 Book Rush 活动，在完成 Step 2 基础上撰写 TiDB 6.0 功能特性与使用体验等技术文章，入选 TiDB 6.0 Book Rush 即可获得权益三；
        </p>
        <p>
          Step 4：文章入选 TiDB 6.0 Book Rush 并获得精选推荐，将授予“ TiDB 荣誉体验官” 并在 PingCAP DevCon 2022 现场颁发权益四。
        </p>
      </div>
      <div className={styles.experience_button_trial}>
        <OutLink className={classnames("button is-primary", styles.opinion_action_button_blue)} href={trialUrl}>
          抢先试用
        </OutLink>
      </div>
      <div className={styles.experience_link_detail}>
        前往 TiDB 社区，了解&nbsp;
        <OutLink className={classnames(styles.experience_link_detail_anchor)} href={detailUrl}>
          Book Rush 活动详情
        </OutLink>
      </div>
      <div className={classNames(/*"columns is-desktop", */styles.experience_gifts)}>
        {gifts.map((value, index) => {
          return (
            <div key={index} className={classNames("column", styles.experience_gifts_item)}>
              <div className={styles.experience_gifts_item_index} style={{color: value.color, borderColor: value.color}}>
                {value.index}
              </div>
              <div className={styles.experience_gifts_item_image}>
                <img src={value.imageUrl} alt={value.title} />
              </div>
              <div className={styles.experience_gifts_item_title}>
                {value.title}
              </div>
              {/*<div className={styles.experience_gifts_item_description}>*/}
              {/*  {value.description}*/}
              {/*</div>*/}
            </div>
          )
        })}
      </div>
      <div className={styles.experience_declaration}>
        {declaration}
      </div>
    </BackgroundContainer>
  )
}

const Resource = () => {
  const title = "相关资源"
  const resources = [
    {
      iconName: "download",
      title: "TiDB 6.0 社区版下载",
      url: "/product-community/",
      isBlank: true,
    },
    {
      iconName: "explore",
      title: "TiDB 快速上手指南",
      url: "https://docs.pingcap.com/zh/tidb/v6.0/quick-start-with-tidb",
      isBlank: true,
    },
    {
      iconName: "article",
      title: "TiDB 文档",
      url: "https://docs.pingcap.com/zh/tidb/v6.0/",
      isBlank: true,
    },
    {
      iconPath: "/tidb-cloud.svg",
      title: "TiDB Cloud",
      url: "https://en.pingcap.com/tidb-cloud/?utm_source=website-zh&utm_medium=cta&utm_campaign=tidb-6.0-release",
      isBlank: true,
    },
  ]
  return (
    <CommunityResources
      name={title}
      data={resources}
    />
    //<BackgroundContainer hasBackgroundColor className={styles.resource}>
    //  <h2 className={styles.resource_title}>{title}</h2>
    //  <div className={styles.resource_list}>
    //    {resources.map((value, index) => {
    //      return (
    //        <OutLink key={index} href={value.linkUrl}>
    //          <img src={value.iconUrl} alt={value.text} />
    //          {value.text}
    //        </OutLink>
    //      )
    //    })}
    //  </div>
    //</BackgroundContainer>
  )
}

//export const query = graphql`
//  query DatabaseBehindNewEconomyDigitalTransformation {
//    allStrapiSolutions(filter: {strapiId: {in: [1,8,5,6]}}) {
//      nodes {
//        customUrl
//        description
//        title
//        strapiId
//        id
//        image {
//          media {
//            url
//          }
//        }
//      }
//    }
//  }
//`