import * as React from "react"
import { graphql, useStaticQuery } from "gatsby"
import { Container, ListImg, Icon } from "@/components"
import RelatedCards from "@/components/related-cards"
import t from "@/constants/wording"
import * as styles from "./index.module.scss"

const DevelopmentPath: React.FC = () => {
  const data = useStaticQuery<DevelopmentPathQuery>(graphql`
    query StrapiDevelopmentPathQuery {
      strapiAboutUsDevelopmentHistory {
        years {
          year
          id
          image {
            alt
            media {
              width
              url
              height
            }
          }
          milestones {
            id
            month
            content
          }
        }
        relatedReportNews {
          aboutUsMediaReport {
            title
            link
            date
            id
          }
        }
      }
    }
  `)

  const timePath: DevelopmentPath[] =
    data.strapiAboutUsDevelopmentHistory.years || []

  if (timePath && timePath.length > 1) {
    timePath.sort((a, b) => (parseInt(a.year) > parseInt(b.year) ? -1 : 1))
    timePath.map(list => {
      if (list.milestones && list.milestones.length > 1) {
        list.milestones.sort((a, b) =>
          parseInt(a.month) > parseInt(b.month) ? -1 : 1
        )
      }
    })
  }

  const { relatedReportNews = [] } = data.strapiAboutUsDevelopmentHistory
  const relatedReportNewsFormat: AboutUsMediaReports[] = relatedReportNews
    ? relatedReportNews.map(item => item.aboutUsMediaReport)
    : []
  relatedReportNewsFormat.sort((a, b) => (a.date > b.date ? -1 : 1))

  return (
    <div className={styles.developmentPath}>
      {timePath && timePath.length > 0 && (
        <Container isSmall={true}>
          {timePath.map(list => (
            <div className={styles.yearContent} key={list.id}>
              <div className={styles.yearLeft}>
                <div className={styles.yearNumber}>{list.year}</div>
                <div className={styles.monthContent}>
                  {list.milestones &&
                    list.milestones.length > 0 &&
                    list.milestones.map(item => (
                      <div className={styles.monthLoop} key={item.id}>
                        <p className={styles.monthNumber}>{item.month}月</p>
                        <pre className={styles.monthDescription}>
                          {item.content}
                        </pre>
                      </div>
                    ))}
                </div>
              </div>
              <div className={styles.imgOuter}>
                <ListImg imgInfo={list.image} scale={[272, 180]} />
              </div>
            </div>
          ))}
        </Container>
      )}
      <RelatedCards
        styleName="left"
        type="reports"
        isSmallDetail={true}
        cards={relatedReportNewsFormat}
        title={<h2>{t("The reports")}</h2>}
        footer={
          <a
            className={styles.seeMore}
            href="/about-us?tab=news&subTab=mediaReports
          "
          >
            {t("See the full report")}
            <Icon name="arrow-right" />
          </a>
        }
      />
    </div>
  )
}

export default DevelopmentPath