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

const FunctionalParameter: React.FC = () => {
  const [parameterShow, setParameterShow] = React.useState(false)

  const dataQuery = useStaticQuery<StrapiProductComparisonQuery>(graphql`
    query StrapiProductComparisonQuery {
      allStrapiProductComparison {
        nodes {
          parameterComparitonGroups {
            groupName
            id
            parameterComparisons {
              communityVersion
              enterpriseVersion
              parameterName
              id
            }
          }
        }
      }
    }
  `)

  const data: parameterComparitonGroups[] =
    dataQuery.allStrapiProductComparison.nodes[0].parameterComparitonGroups ||
    []

  return (
    <div
      className={`${styles.functionalParameter} ${
        parameterShow ? styles.parameterContentShow : ""
      }`}
    >
      <div
        className={styles.parameterHeader}
        onClick={() => setParameterShow(flag => !flag)}
      >
        {t("more functional parameter compare")}
        <Icon name="chevron-right" />
      </div>
      <div className={styles.parameterContent}>
        <div className={styles.innerContent}>
          <div className={`${styles.loop} ${styles.mainTitle}`}>
            <span></span>
            <span>{t("community")}</span>
            <span>{t("enterprise")}</span>
          </div>
          {data &&
            data.length > 0 &&
            data.map((list: parameterComparitonGroups) => (
              <div key={list.id} className={styles.loopContent}>
                <div className={`${styles.loop} ${styles.subTitle}`}>
                  <span>{list.groupName}</span>
                </div>
                {list.parameterComparisons &&
                  list.parameterComparisons.length > 0 &&
                  list.parameterComparisons.map(
                    (item: parameterComparisons) => (
                      <div className={styles.loop} key={item.id}>
                        <span>{item.parameterName}</span>
                        <span>
                          {item.communityVersion && (
                            <Icon
                              name="check"
                              className={styles.communityIcon}
                            />
                          )}
                        </span>
                        <span>
                          {item.enterpriseVersion && (
                            <Icon
                              name="check"
                              className={styles.enterpriseIcon}
                            />
                          )}
                        </span>
                      </div>
                    )
                  )}
              </div>
            ))}
        </div>
      </div>
    </div>
  )
}

export default FunctionalParameter