import React from "react"
import cls from "classnames"
import chunk from "lodash/chunk"
import groupBy from "lodash/groupBy"
import * as styles from "./index.module.scss"
import Container from "../../container"
import { CustomLink, ImgIcon } from "@/components"
import { graphql, useStaticQuery } from "gatsby"

const EcologicalTools = () => {
  const data = useStaticQuery<EcologicalToolsQuery>(graphql`
    query EcologicalToolsQuery {
      allStrapiEcologicalToolLinks(sort: { fields: order, order: ASC }) {
        nodes {
          name
          order
          link
          id
          title
        }
      }
      allStrapiEcologicalToolClassifications {
        nodes {
          name
          icon {
            url
          }
          id
        }
      }
    }
  `)
  const {
    allStrapiEcologicalToolLinks: { nodes },
    allStrapiEcologicalToolClassifications
  } = data

  const group: any = groupBy(nodes, "title")
  const dataChunk: [string, EcologicalTool[]][][] = chunk(
    Object.entries<EcologicalTool[]>(group),
    2
  )
  return (
    <section
      id="ecological-tools"
      className={cls("section", styles.ecologicalTools)}
    >
      <Container>
        <h1>TiDB 工具</h1>
        <div className="columns is-variable is-4">
          {dataChunk.map((x, index) => (
            <div key={index} className="column is-half-tablet is-mobile py-3">
              <div className="columns is-variable is-4-desktop is-2-tablet is-2-mobile is-mobile">
                {x.map(([title, list], i) => (
                  <div key={i} className="column is-half-tablet is-half-mobile">
                    <ImgIcon
                      className={styles.icon}
                      src={
                        allStrapiEcologicalToolClassifications.nodes.filter(
                          value => value.name === title
                        )[0].icon.url
                      }
                      alt={title}
                    />
                    <h3>{title}</h3>
                    {list.map(({ id, name, link }) => (
                      <CustomLink linkTo={link} key={id}>
                        <p className={styles.p1}>{name}</p>
                      </CustomLink>
                    ))}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
}

export default EcologicalTools