import * as React from "react"
import Container from "@/components/container"
import LinkModule from "@/components/link-module"
import cls from "classnames"
import { graphql, Link, useStaticQuery } from "gatsby"
import { navigate } from "gatsby"

import * as styles from "./index.module.scss"

interface IProps {
  textContent: {
    h4Text?: string
    h1Text: string
    h5Text: string
    isShowMore?: boolean
    showDescription?: boolean
  }
}

const OurPartner: React.FC<IProps> = ({ textContent }) => {
  const data = useStaticQuery<StrapiCasesForLogoWallQuery>(graphql`
    query StrapiCustomerCases {
      allStrapiCasesForLogoWalls(
        limit: 15
        sort: { fields: order, order: ASC }
      ) {
        edges {
          node {
            customerCase {
              logoWallLogo {
                alt
                media {
                  url
                }
              }
              customUrl
              description
              id
              title
              logo {
                alt
                media {
                  url
                }
              }
            }
          }
        }
      }
      strapiHome {
        ourPartnerBg {
          media {
            url
          }
        }
      }
    }
  `)

  const {
    allStrapiCasesForLogoWalls: { edges },
  } = data
  const cardCases = edges
    .slice(0, 3)
    .filter(item => item.node.customerCase.id !== null)
  const logoWallCases = edges
    .slice(3)
    .filter(item => item.node.customerCase.id !== null)
  const bg = data.strapiHome.ourPartnerBg.media.url || ""

  const getCaseContent = (node: StrapiCaseForLogoWall) => {
    const {
      customerCase: { customUrl, id, title, logo },
    } = node
    if (textContent.showDescription) {
      return (
        <li className={styles.KAcard} key={id}>
          <div className={styles.frontContainer}>
            <div className={styles.logoContainer}>
              <img src={logo.media.url} alt={logo.alt} />
            </div>
            <p className={styles.title}>
              <Link to={`/case/${customUrl ?? `Customer-cases_${id}`}`}>
                {title}
              </Link>
            </p>
          </div>
          <Link to={`/case/${customUrl ?? `Customer-cases_${id}`}`}>
            <div className={styles.descriptionContainer}>
              <p>{node.customerCase.description}</p>
            </div>
          </Link>
        </li>
      )
    } else {
      return (
        <li
          className={`${styles.KAcard} ${styles.KAcardClick} card-animate-up`}
          key={node.customerCase.id}
          onClick={() =>
            navigate(`/case/${customUrl ?? `Customer-cases_${id}`}`)
          }
        >
          <div className={styles.frontContainer}>
            <div className={styles.logoContainer}>
              <img
                src={node.customerCase.logo.media.url}
                alt={node.customerCase.logo.alt}
              />
            </div>
            <p className={styles.title}>{node.customerCase.title}</p>
          </div>
        </li>
      )
    }
  }

  return (
    <div className={styles.container}>
      <div
        className={styles.backgroundContainer}
        style={{ backgroundImage: `url(${bg})` }}
      >
        <Container>
          <header
            className={cls(
              `${styles.header} ${
                textContent.h4Text ? "" : styles.headerBigTop
              }`
            )}
          >
            <div className="region-header-white">
              <h4>{textContent.h4Text}</h4>
              <h1>{textContent.h1Text}</h1>
              <h5>{textContent.h5Text}</h5>
            </div>
          </header>
        </Container>
      </div>
      <Container>
        <section className={styles.section}>
          <ul className={styles.KApartners}>
            {cardCases.map(
              ({ node }: { node: StrapiCaseForLogoWall }) =>
                node.customerCase && getCaseContent(node)
            )}
          </ul>
          <div className="columns is-mobile is-variable is-2-mobile is-2-tablet is-4-desktop is-flex-wrap-wrap is-align-items-center">
            {logoWallCases.map(
              ({ node }) =>
                node.customerCase && (
                  <div
                    className="column is-2-desktop is-6-mobile is-6-tablet logo-wall-image"
                    key={node.customerCase.id}
                  >
                    <Link
                      to={`/case/${
                        node.customerCase.customUrl ??
                        `Customer-cases_${node.customerCase.id}`
                      }`}
                    >
                      <img
                        src={node.customerCase.logoWallLogo.media.url}
                        alt={node.customerCase.logoWallLogo.alt}
                      />
                    </Link>
                  </div>
                )
            )}
          </div>
        </section>
      </Container>
      {textContent.isShowMore && (
        <footer className={styles.footer}>
          <LinkModule to={"/case"}>查看更多客户案例</LinkModule>
        </footer>
      )}
    </div>
  )
}

export default OurPartner