text: import React from "react"
  import { graphql } from "gatsby"
  import PropTypes from "prop-types"
  
  import Layout from "../../layouts/uk/default"
  import { Inner } from "../../components/Container"
  import SingleNavagation from "../../components/SingleNavagation"
  import Contacts from "../../components/lendingSections/Contacts"
  import parseContent from "../../utils/parseContent"
  import TermItem from "../../components/TermItem"
  import { HeadingWithMeta, HeadingWithHero } from "../../components/WorkHeading"
  
  import * as styles from "./styles.module.css"
  import ReviewCarousel from "../../components/ReviewCarousel/ReviewCarousel"
  import Headline from "../../components/Headline"
  import mailTo from "../../utils/mailTo"
  import getServiceURI from "../../utils/getServiceURI"
  import { filterProjectReviews } from "../../utils/filterProjectReviews"
  
  const WorkTemplate = ({ data, pageContext: { next, prev }, location }) => {
    const {
      title,
      content,
      wordpress_id,
      featuredImage,
      workCategories,
      workServices,
      workGenres,
      workPlatforms,
      workDevelopers,
      acf,
      seo,
      video,
    } = data.wpWork
  
    const Content = parseContent(content)
  
    const isHeroFormat = video.workVideo !== null
  
    const reviews = filterProjectReviews(data.reviews.nodes, wordpress_id)
  
    return (
      <Layout
        location={location}
        title={seo.title || title}
        disableSiteNameInTitle
        description={seo.description}
      >
        {isHeroFormat && (
          <div className={styles.videoBGWrapper}>
            <div className={styles.videoBG}>
              <iframe
                src={`https://player.vimeo.com/video/${video.workVideo}?background=1&autoplay=1&loop=1&byline=0&title=0`}
                frameBorder="0"
                allowFullScreen
                title={`${title} - video bg`}
              ></iframe>
            </div>
          </div>
        )}
        <Inner>
          <div className={styles.template}>
            {isHeroFormat ? (
              <HeadingWithHero title={title} />
            ) : (
              <HeadingWithMeta
                image={featuredImage.node}
                title={title}
                terms={
                  <>
                    <TermItem
                      className={styles.metaValues}
                      terms={workCategories.noodes}
                      name="Категорія"
                    />
                    <TermItem
                      className={styles.metaValues}
                      terms={getServiceURI(workServices.nodes)}
                      name="Послуга"
                    />
                    <TermItem
                      className={styles.metaValues}
                      terms={workGenres.nodes}
                      name="Жанр"
                    />
                    <TermItem
                      className={styles.metaValues}
                      terms={workPlatforms.nodes}
                      name="Платформа"
                    />
                    <TermItem
                      className={styles.metaValues}
                      terms={workDevelopers.nodes}
                      name="Розробник"
                    />
                    <TermItem
                      className={styles.metaValues}
                      terms={acf.autors}
                      name="Робота над проєктом"
                    />
                  </>
                }
              />
            )}
  
            <div
              className={styles.content}
              style={{
                marginBottom: reviews.length ? "0" : "3rem",
              }}
            >
              {Content}
            </div>
            {reviews.length > 0 && (
              <>
                <Headline Tag="h2">Відгук клієнта</Headline>
                <div
                  style={{
                    marginBottom: "2rem",
                  }}
                >
                  <ReviewCarousel reviews={reviews} />
                </div>
              </>
            )}
          </div>
        </Inner>
        <SingleNavagation
          next={next ? next.slug : null}
          prev={prev ? prev.slug : null}
          list="portfolio"
          prefix="works"
        />
        <Inner>
          <Contacts>
            Розкажіть нам про свій проєкт, продукт або ідею. Запитайте пораду або
            отримайте повноцінну{" "}
            <a
              rel="nofollow noopener noreferrer"
              target="_blank"
              href={mailTo.mail.uk}
            >
              безплатну консультацію
            </a>
            . Дізнайтеся вартість, уточніть важливе питання, та що завгодно! Ми
            будемо раді з вами познайомитися й допомогти.
          </Contacts>
        </Inner>
      </Layout>
    )
  }
  
  WorkTemplate.propTypes = {
    data: PropTypes.object.isRequired,
    edges: PropTypes.array,
  }
  
  export default WorkTemplate
  
  export const pageQuery = graphql`
    query($id: String!) {
      wpWork(id: { eq: $id }) {
        ...work
      }
      site {
        siteMetadata {
          title
        }
      }
      reviews: allWpClientReview(filter: { language: { code: { eq: UK } } }) {
        ...workClientReviews
      }
    }
  `
  