import * as React from "react"

import Layout from "@/components/layout"
import Seo from "@/components/seo"
import * as styles from "./index.module.scss"
import CourseItem from "@/components/courses-catalog/CourseItem"
import Banner from "@/components/courses-catalog/banner"
import BackgroundContainer from "@/components/BackgroundContainer"
import useContactForm from "@/hooks/useContactForm"
import { Link } from "gatsby"
import classNames from "classnames"

const regexp = /[a-zA-Z]/

const CoursesCatalogPage: React.FC<{
  location: ILocation & { pathname: string }
  pageContext: {
    allStrapiCoursesCatalog: { nodes: CoursesCatalog[] },
    allStrapiCoursesCatalogMatchedPeople: { nodes: CoursesCatalogMatchedPeople[] },
  }
}> = ({ location, pageContext }) => {
  //PageProps<FetchProductDataQuery> & { location: ILocation }
  const {
    allStrapiCoursesCatalog,
    allStrapiCoursesCatalogMatchedPeople,
  } = pageContext
  //console.log("!!data", data)
  const { dom: ContactFormDOM, handleOpen } = useContactForm(location, {
    consult_category: "1L11iLelP",
  })

  return (
    <Layout>
      <Seo
        title={"TiDB 课程列表"}
        description={"浏览 TiDB 所有在线课程，学习新技能。"}
        keywords={
          "TiDB,PingCAP,分布式数据库,学习 TiDB,课程,PingCAP 认证,培训咨询,talent plan"
        }
      />

      <Banner className="partnerBanner">系统学习 TiDB，成为 TiDB 专家</Banner>

      <BackgroundContainer hasBackgroundColor>
        <div className={styles.filter}>
          <Link className={classNames("button is-link", {"is-outlined": location.pathname !== "/courses-catalog"})} to={"/courses-catalog"}>全部课程</Link>
          {allStrapiCoursesCatalogMatchedPeople.nodes.map(value => (
            <Link className={classNames("button is-link", {"is-outlined": location.pathname !== `/courses-catalog/${value.url}`})} to={`/courses-catalog/${value.url}`}>
              我是{regexp.test(value.name.charAt(0)) && " "}{value.name}
            </Link>
          ))}
          {/*<button className="button is-link is-outlined">*/}
          {/*  我是后端开发人员 (5)*/}
          {/*</button>*/}
          {/*<button className="button is-link is-outlined">我是 DBA (14)</button>*/}
          {/*<button className="button is-link is-outlined">我是架构师 (3)</button>*/}
        </div>

        <div className={styles.list}>
          <div className={"columns is-flex-wrap-wrap"}>
            {allStrapiCoursesCatalog.nodes.map((value, index) => (
              <div className={"column is-12-mobile is-6-tablet is-4-desktop"}>
                <CourseItem
                  key={index}
                  className={styles.list_item}
                  icon={value.icon}
                  name={value.name}
                  freeBadge={value.freeBadge}
                  version={value.courses_catalog_matched_version}
                  level={value.level.name}
                  matchedPeople={value.matched_people.map(value => value.name)}
                  durationTime={value.duration_time}
                  precondition={value.precondition}
                  introduction={value.introduction}
                  links={value.buttons}
                  showContactButton={value.showContactButton}
                  handleOpenContact={handleOpen}
                />
              </div>
            ))}
          </div>
        </div>
      </BackgroundContainer>

      {ContactFormDOM}
    </Layout>
  )
}

export default CoursesCatalogPage

//export const query = graphql`
//  query fetchCoursesCatalog {
//    allStrapiCoursesCatalog {
//      totalCount
//      nodes {
//        id
//        introduction
//        name
//        precondition
//        freeBadge
//        duration_time
//        buttons {
//          id
//          link
//          text
//        }
//        courses_catalog_matched_version {
//          version
//        }
//        matched_people {
//          name
//        }
//        level {
//          name
//        }
//        icon {
//          url
//        }
//      }
//    }
//    allStrapiCoursesCatalogMatchedPeople {
//      nodes {
//        name
//        order
//      }
//    }
//  }
//`