import * as React from "react"
import {useEffect, useState} from "react";
import { graphql } from "gatsby"

import Layout from "@/components/layout"
import Seo from "@/components/seo"
import { Banner, Container, CustomLink, Icon, LinkModule } from "@/components"
import t from "@/constants/wording"
import TiDBIcon from "@/images/tidb-icon.svg"
import FreeExperience from "./free-experience"
import ProductAdvantages from "./product-advantages"
import { PRODUCT_FILE_DOWNLOAD_URL } from "@/constants/product"
import Categories from "./categories"
import FeaturedPartner from "@/components/solution/featured-partner"
import { ContactFormInner } from "@/components/contact-form/ContactForm"
import * as styles from "./index.module.scss"
import BackgroundContainer from "@/components/BackgroundContainer"
import CardWithTextMask from "@/components/CardWithTextMask"
import phoneCall from "./phone-call.svg"
import phoneCallHover from "./phone-call-hover.svg"
import question from "./question.svg"
import questionHover from "./question-hover.svg"
import contactFormWidget from "./contact-form-widget-1.svg"
import OutLink from "@/components/OutLink"
import usePopup from "@/hooks/usePopup"


export const contactFormId = "contact-us-now-form"

const TiDB企业级开源分布式数据库_产品与解决方案 = "https://live.pingcap.com/resources/ResourcePc/ResourcePcInfo?pf_uid=19697_1864&id=21153&source=1&pf_type=3&channel_id=30309&channel_name=pingcap-%E5%AE%98%E7%BD%91&tag_id=dafc115c773f5254"
const TiDB行业案例集_TiDB_Vertical_Case_Study = "https://live.pingcap.com/resources/ResourcePc/ResourcePcInfo?pf_uid=19697_1864&id=22994&source=1&pf_type=3&channel_id=30309&channel_name=pingcap-%E5%AE%98%E7%BD%91&tag_id=dafc115c773f5254"
const 白皮书_实时数据服务平台_金融行业实时HTAP场景实践 = "https://live.pingcap.com/resources/ResourcePc/ResourcePcInfo?pf_uid=19697_1864&id=26897&source=1&pf_type=3&channel_id=30309&channel_name=pingcap-%E5%AE%98%E7%BD%91&tag_id=dafc115c773f5254"
const 新经济DTC用户场景白皮书 = "https://live.pingcap.com/resources/ResourcePc/ResourcePcInfo?pf_uid=19697_1864&id=30372&source=1&pf_type=3&channel_id=30309&channel_name=pingcap-%E5%AE%98%E7%BD%91&tag_id=dafc115c773f5254"

const phoneNumber = "400-6790-886"

const headerExtend = (
  <a className={styles.header_phone} href={`tel:${phoneNumber}`}>
    <Icon name={"call"} className={styles.header_phone_icon} />
    {/*<img className={styles.header_phone_icon} src={phoneCall} alt="phone" />*/}
    <span className={styles.header_phone_label}>{phoneNumber}</span>
  </a>
)

const ProductPage: React.FC<
  PageProps<
    FetchProductDataQuery & {
      allStrapiProductAdvantages: { nodes: ProductAdvantages[] }
    }
  > & { location: ILocation }
> = ({ data, location }) => {
  const {
    strapiProductPage: { homeBanner },
    allStrapiProductAdvantages: { nodes },
  } = data

  const bannerTitle = () => (
    <div className="is-flex is-justify-content-center is-align-items-center product-banner-title">
      <img className="pr-5" src={TiDBIcon} alt="TiDB logo" />
      {t("product page banner title")}
    </div>
  )

  return (
    <>
      <Layout hiddenUseFreeButton hiddenGitHubIcon headerExtend={headerExtend}>
        <Seo
          title={"立即咨询 TiDB 企业版"}
          description={
            "TiDB 是一款定位于在线事务处理/在线分析处理的融合型数据库产品，实现了一键水平伸缩，强一致性的多副本数据安全，分布式事务，实时 OLAP 等重要特性。同时兼容 MySQL 协议和生态，迁移便捷，运维成本极低。"
          }
          keywords={
            "TiDB,HTAP,MySQL 兼容,分布式数据库,实时数仓,实时商业智能,实时数据分析,数据中台"
          }
        />
        <div id="product-banner">
          <Banner
            title={bannerTitle()}
            subtitle={t("product page banner subtitle")}
            image={homeBanner}
          >
            <div style={{ padding: "0 0 2rem 0" }}>
              <a className="button is-white is-medium" href={`#${contactFormId}`}>
                立即咨询
              </a>
            </div>
            <div>
              <CustomLink linkTo={PRODUCT_FILE_DOWNLOAD_URL} className="a-dark">
                <i className="iconfont icon-picture_as_pdf_black_24dp pr-1" />
                {t("Download product introduction")}
              </CustomLink>
            </div>
          </Banner>
        </div>
        <BackgroundContainer hasBackgroundColor>
          <Container className={styles.first_row}>
            <div className={styles.first_row_start}>
              <ProductAdvantages isShowLookDetailLink={false} myData={nodes} />
            </div>
            <div className={styles.first_row_end}>
              <Container id={contactFormId} className={styles.contact_form}>
                <div className={styles.contact_form_widget}>
                  <img src={contactFormWidget} alt="" />
                </div>
                <div className={styles.contact_form_body}>
                  <h1>我们乐于提供咨询</h1>
                  <h5>
                    您可以填写表单向我们咨询，也可以选择合适方式与我们联系，PingCAP 将竭诚为您提供帮助
                  </h5>
                  <ContactFormInner
                    isShowHeader={false}
                    consult_category={"yw85Z2q9U"}
                    location={location}
                  />
                </div>
              </Container>
            </div>
          </Container>
        </BackgroundContainer>
        <Download />
        {/*<ChoiceProduct />*/}
        {/*<ProductIntroduce />*/}
        {/*<EcologicalTools />*/}
        {/*<MoreResource />*/}
        <FeaturedPartner
          title={"全球客户在 TiDB 上构建未来型企业"}
          description={
            "TiDB 现已被 3000 多家不同行业的领先企业应用在实际生产环境，探索它们是如何利用 TiDB 来破解业务挑战并走向成功的。"
          }
          moreLinkNode={<LinkModule to={`#${contactFormId}`}>咨询案例详情</LinkModule>}
          clickableLogo={false}
        />
        <Categories />
        <FreeExperience />
      </Layout>
      <ContactFloat />
    </>
  )
}

export const Download = ({ title = "资料下载" }) => {
  const downloads = [
    {
      title: <span>TiDB 产品和解决方案手册 <Icon name="download" /></span>,
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/1_3dbea40bf3.jpg",
      link: TiDB企业级开源分布式数据库_产品与解决方案,
    },
    {
      title: <span>TiDB 行业案例集 <Icon name="download" /></span>,
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/2_0f7730e8ad.jpg",
      link: TiDB行业案例集_TiDB_Vertical_Case_Study,
    },
    {
      title: <span>金融行业 HTAP 实践白皮书 <Icon name="download" /></span>,
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/DTC_66e9d09c82.jpg",
      link: 白皮书_实时数据服务平台_金融行业实时HTAP场景实践,
    },
    {
      title: <span>新经济 DTC 用户场景白皮书 <Icon name="download" /></span>,
      imageUrl: "https://www-website-strapi.oss-cn-shanghai.aliyuncs.com/prod/HTAP_e9204471c6.svg",
      link: 新经济DTC用户场景白皮书,
    },
  ]
  return (
    <BackgroundContainer hasBackgroundColor className={styles.download}>
      <h2 className={styles.download_title}>{title}</h2>
      <div className={styles.download_list}>
        {downloads.map(value => (
          <OutLink href={value.link} className={styles.download_list_item}>
            <CardWithTextMask {...value} />
          </OutLink>
        ))}
      </div>
    </BackgroundContainer>
  )
}

function ContactFloat() {
  const [phoneCallIconSrc, setPhoneCallIconSrc] = useState(phoneCall)
  const [questionIconSrc, setQuestionIconSrc] = useState(question)
  const [isOpen, handleOpen, handleClose] = usePopup()
  const handleClickPhone = (event: React.MouseEvent<HTMLDivElement>) => {
    event.stopPropagation()
    handleOpen()
  }
  useEffect(() => {
    document.addEventListener("click", handleClose)
    return () => document.removeEventListener("click", handleClose)
  }, [])
  return (
    <>
      <div className={styles.contact_float}>
        <div className={styles.contact_float_icon} onMouseEnter={() => setPhoneCallIconSrc(phoneCallHover)} onMouseLeave={() => setPhoneCallIconSrc(phoneCall)} onClick={handleClickPhone}>
          <img src={phoneCallIconSrc} alt="phone" />
        </div>
        <div className={styles.contact_float_split}></div>
        <div className={styles.contact_float_icon} onMouseEnter={() => setQuestionIconSrc(questionHover)} onMouseLeave={() => setQuestionIconSrc(question)}>
          <a href={`#${contactFormId}`}>
            <img src={questionIconSrc} alt="question" />
          </a>
        </div>
      </div>

      {isOpen && (
        <div
          className={styles.contact_modal}
          onClick={(event: React.MouseEvent) => event.stopPropagation()}
        >
          <div className={styles.contact_modal_title}>
            <a href={`tel:${phoneNumber}`}>立即与 PingCAP 技术顾问通话</a>
          </div>
          <div className={styles.contact_modal_phone}>
            <a href={`tel:${phoneNumber}`}>
              {phoneNumber}
            </a>
          </div>
          <div className={styles.contact_modal_actions}>
            <OutLink className="button is-primary" href={TiDB企业级开源分布式数据库_产品与解决方案}>获取产品手册</OutLink>
            <OutLink className="button is-primary" href={TiDB行业案例集_TiDB_Vertical_Case_Study}>获取案例手册</OutLink>
          </div>
        </div>
      )}
    </>
  )
}

export const query = graphql`
  query FetchContactUsNowDataQuery {
    strapiProductPage {
      homeBanner {
        media {
          url
          width
          height
        }
      }
    }
    allStrapiProductAdvantages(sort: { fields: order, order: ASC }) {
      nodes {
        banner {
          alt
          media {
            url
          }
        }
        description
        title
        features {
          feature
          id
        }
        id
        coreValues {
          description
          image {
            media {
              url
              width
              height
            }
            alt
          }
        }
      }
    }
  }
`

export default ProductPage