import * as React from "react"
import * as styles from "./index.module.scss"
import { CardItem } from "./card-item"
import Container from "@/components/container"
import { graphql, useStaticQuery } from "gatsby"
import { useEffect, useState } from "react"
import cls from "classnames"
import Icon from "@/components/icon"
import t from "@/constants/wording"

interface IArticles {
  node: InsightArticle
}

const CARD_NUM = 6

const AllInsightArticle: React.FC = () => {
  const [sliceNum, setSliceNum] = useState<number>(CARD_NUM)
  const [isShowMoreButton, setIsShowMoreButton] = useState<boolean>(false)
  const [renderArticles, setRenderArticles] = useState<IArticles[]>([])

  const data = useStaticQuery<AllInsightArticles>(graphql`
    query AllInsightsQuery {
      allStrapiInsights(sort: { fields: date, order: DESC }) {
        edges {
          node {
            id
            customUrl
            type
            body
            image {
              alt
              media {
                url
              }
            }
            lable
            title
            description
          }
        }
      }
    }
  `)

  const nodes = data.allStrapiInsights.edges

  function sliceArticles() {
    setRenderArticles(nodes.slice(0, sliceNum))
    setIsShowMoreButton(nodes.length > sliceNum)
  }

  function addSliceNum() {
    setSliceNum(sliceNum + CARD_NUM)
  }

  useEffect(() => {
    sliceArticles()
  }, [sliceNum])

  return (
    <div className={styles.allInsightArticle}>
      <Container>
        <div
          className={cls(
            "columns is-4-desktop is-2-tablet is-2-mobile is-variable is-flex-wrap-wrap",
            styles.articles
          )}
        >
          {renderArticles.map(data => (
            <CardItem key={data.node.id} cardInfo={data.node} />
          ))}
        </div>
      </Container>
      <div className={styles.moreButton}>
        {isShowMoreButton && (
          <button
            className="button is-medium is-ghost is-primary"
            onClick={addSliceNum}
          >
            <span>{t("expand to show more data")}</span>
            <span className="icon">
              <Icon name="chevron-right" />
            </span>
          </button>
        )}
      </div>
    </div>
  )
}

export default AllInsightArticle