import React, { useEffect, useState } from "react"
import cls from "classnames"
import { useStaticQuery, graphql } from "gatsby"
import * as styles from "./index.module.scss"
import SwiperContainer from "@/components/swiper"
import HoverDescriptionCard from "@/components/hover-description-card"
import InsightCard from "@/components/insight/all-insight-article/card-item"
import MediaReportsCard from "@/components/about-us/media-reports-card"

interface IQuery {
  allStrapiCustomerCases: {
    nodes: StrapiCustomerCases[]
  }
  allStrapiInsights: {
    nodes: InsightDetail[]
  }
  allStrapiJointSolution: {
    nodes: JointSolution[]
  }
  allStrapiAboutUsMediaReports: {
    nodes: AboutUsMediaReports[]
  }
}

const RelatedCards: React.FC<RelatedCardsProps> = ({
  styleName,
  type,
  isSmallDetail,
  cards,
  title,
  footer,
}) => {
  // todo: haoyang -- extra query need remove
  const {
    allStrapiCustomerCases,
    allStrapiInsights,
    allStrapiJointSolution,
    allStrapiAboutUsMediaReports,
  } = useStaticQuery<IQuery>(
    graphql`
      query {
        allStrapiCustomerCases {
          nodes {
            id
            customUrl
            logo {
              alt
              media {
                url
              }
            }
          }
        }
        allStrapiInsights {
          nodes {
            id
            customUrl
            image {
              alt
              media {
                url
              }
            }
          }
        }
        allStrapiJointSolution {
          nodes {
            id
            customUrl
            jointCompanyLogo {
              alt
              media {
                url
              }
            }
          }
        }
        allStrapiAboutUsMediaReports {
          nodes {
            id
            logo {
              alt
              media {
                url
              }
            }
          }
        }
      }
    `
  )

  const [rewriteLogoAndIdCards, setRewriteLogoAndIdCards] = useState<
    RelatedCard[]
  >([])

  useEffect(() => {
    cards = cards.filter(item => item.id !== null)

    switch (type) {
      case "case":
        setRewriteLogoAndIdCards(
          cards.map(card => {
            const thatCase = allStrapiCustomerCases.nodes.find(
              node => node.id === `Customer-cases_${card.id}`
            )
            if (thatCase) {
              return {
                ...card,
                id: thatCase.id,
                logo: thatCase.logo,
                customUrl: thatCase.customUrl,
              }
            }
            return card
          })
        )
        break
      case "solution":
        setRewriteLogoAndIdCards(
          cards.map(card => {
            return { ...card, id: `Solutions_${card.id}` }
          })
        )
        break
      case "insight":
        setRewriteLogoAndIdCards(
          cards.map(card => {
            const thatInsight = allStrapiInsights.nodes.find(
              node => node.id === `Insights_${card.id}`
            )
            if (thatInsight) {
              return {
                ...card,
                id: thatInsight.id,
                image: thatInsight.image,
                customUrl: thatInsight.customUrl,
              }
            }
            return card
          })
        )
        break
      case "joinSolution":
        setRewriteLogoAndIdCards(
          cards.map(card => {
            const thatIJoinSolution = allStrapiJointSolution.nodes.find(
              node => node.id === `Joint-solution_${card.id}`
            )
            if (thatIJoinSolution) {
              return {
                ...card,
                id: thatIJoinSolution.id,
                logo: thatIJoinSolution.jointCompanyLogo,
                customUrl: thatIJoinSolution.customUrl,
              }
            } else {
              return card
            }
          })
        )
        break
      case "reports":
        setRewriteLogoAndIdCards(
          cards.map(card => {
            const thatReports = allStrapiAboutUsMediaReports.nodes.find(
              node => node.id === `About-us-media-reports_${card.id}`
            )
            return thatReports
              ? { ...card, id: thatReports.id, logo: thatReports.logo }
              : card
          })
        )
        break
    }
  }, [])

  return rewriteLogoAndIdCards.length > 0 ? (
    <section
      className={cls(styles.relatedCards, styleName ? styles[styleName] : "")}
    >
      <div className="container px-4">
        <div className={isSmallDetail ? "common-center-container" : ""}>
          {title}
        </div>
      </div>
      <div className={styles.cards}>
        <SwiperContainer
          listData={rewriteLogoAndIdCards}
          smallSwiper={isSmallDetail}
        >
          {item => {
            switch (type) {
              case "case":
                return (
                  <HoverDescriptionCard
                    {...item}
                    to={`/case/${item.customUrl ?? item.id}`}
                  />
                )
              case "solution":
                return (
                  <HoverDescriptionCard
                    {...item}
                    to={`/solution-detail/${item.customUrl ?? item.id}`}
                  />
                )
              case "insight":
                return (
                  <InsightCard cardInfo={item} disableAllInsightClassName />
                )
              case "joinSolution":
                return (
                  <HoverDescriptionCard
                    {...item}
                    to={`/joint-solution-detail/${
                      item.customUrl ?? item.id
                    }`}
                  />
                )
              case "reports":
                return (
                  <MediaReportsCard
                    cardInfo={{
                      id: item.id,
                      link: item.link || "",
                      date: item.date || "",
                      title: item.title,
                      logo: item.logo || {
                        alt: "",
                        media: { url: "" },
                      },
                    }}
                  />
                )
            }
          }}
        </SwiperContainer>
      </div>
      <div className="container px-4">
        <div className={isSmallDetail ? "common-center-container" : ""}>
          <footer>{footer}</footer>
        </div>
      </div>
    </section>
  ) : (
    <React.Fragment />
  )
}

export default RelatedCards