import * as React from "react"
import { useStaticQuery, graphql } from "gatsby"
import { Container, ListLayout, ListImg, CustomLink } from "@/components"
import { EDUCATION_ROLE_BTN } from "@/constants/education"
import * as styles from "./index.module.scss"
import useContactForm from "@/hooks/useContactForm"

interface IProps {
  location: ILocation
}

const EducationRole: React.FC<IProps> = ({ location }) => {
  const dataQuery = useStaticQuery<EducationRolesQuery>(graphql`
    query StrapiEducationRolesQuery {
      allStrapiEducationRoles(sort: { fields: order, order: ASC }) {
        nodes {
          image {
            alt
            media {
              width
              url
              height
            }
          }
          id
          description
          role
          type
        }
      }
    }
  `)

  const data: EducationRoles[] = dataQuery.allStrapiEducationRoles.nodes || []

  const { dom: ContactFormDOM, handleOpen } = useContactForm(location, {
    consult_category: "1L11iLelP",
  })

  return (
    <>
      <div className="common-region-grey">
        <Container>
          <ListLayout listData={data}>
            {(item: EducationRoles) => (
              <div className={`common-card-content ${styles.inner}`}>
                <div className={styles.logo}>
                  <ListImg imgInfo={item?.image} scale={[1, 1]} />
                </div>
                <h4>{item.role}</h4>
                <p>{item.description}</p>
                <div className={styles.BtnContent}>
                  {EDUCATION_ROLE_BTN[item.type].map(
                    (list: EducationRoleBtn, index: number) =>
                      list.contactForm ? (
                        <button
                          className="button is-outlined"
                          onClick={handleOpen}
                          key={index}
                        >
                          {list.title}
                        </button>
                      ) : (
                        <CustomLink
                          className="button is-outlined"
                          linkTo={list.link}
                          key={index}
                        >
                          {list.title}
                        </CustomLink>
                      )
                  )}
                </div>
              </div>
            )}
          </ListLayout>
        </Container>
      </div>
      {ContactFormDOM}
    </>
  )
}

export default EducationRole