/** @jsx jsx */
import { jsx } from 'theme-ui'

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import Footer from '../sections/Footer/Footer'
import Header from '../sections/Header/Header'
import {
  H1,
  Helmet,
  Row,
  Col,
  ResponsiveNavigation,
  Container
} from 'gatsby-theme-landmarks-core'
import {
  Floorplan,
  ThemeBreadcrumbs,
} from 'gatsby-theme-landmarks-developer'

export default props => {
  const { pageContext, metaTitle, metaDescription } = props
  const { publicThemeOptions, uniqueFloors, apartamente, etaj, breadcrumb: { crumbs } } = pageContext
  const selectedFloorIndex = uniqueFloors.findIndex(x =>
    x.label.includes(etaj.nr)
  )
  const data = useStaticQuery(graphql`
    {
      garden: file(ext: { eq: ".svg" }, name: { eq: "garden" }) {
        publicURL
      }
    }
  `)

  return (
    <>
      <Helmet>
        <title>{`Etaj ${etaj.nr} | ${publicThemeOptions.name}`}</title>
        {metaTitle && (
          <meta
            name="title"
            content={`Etaj ${etaj.nr} | ${publicThemeOptions.name}`}
          />
        )}
        {metaDescription && (
          <meta name="description" content={metaDescription} />
        )}
      </Helmet>

      <Header logoSrc={props.logoSrc} logoAlt={publicThemeOptions.name} />

      <Container
        sx={{
          px: [3, 4]
        }}
      >
        <Row
          sx={{
            pt: ['108px', null, 4]
          }}
        >
          <Col
            sx={{
              alignSelf: 'flex-start',
              position: ['initial', null, 'sticky'],
              top: '170px',
              overflow: 'hidden'
            }}
          >
            <ResponsiveNavigation
              selectedIndex={selectedFloorIndex}
              links={uniqueFloors}
              sx={{
                pr: 4
              }}
            />
          </Col>

          <Col
            sx={{
              flex: ['auto', 'auto', 3]
            }}
          >
            <H1
              sx={{
                variant: 'text.golden',
                marginTop: '50px',
                marginBottom: '40px'
              }}
            >{`Etaj ${etaj.nr}`}</H1>
            <ThemeBreadcrumbs crumbs={crumbs} />
            <Floorplan
              apartamente={apartamente}
              background={data.garden.publicURL}
            />
          </Col>
        </Row>
      </Container>
      <Footer />
    </>
  )
}