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

import React from 'react'
import Img from 'gatsby-image'
import { Link } from 'gatsby'

import { APARTMENT_STATUS } from '../config'
import {
  Button,
  Helmet,
  Row,
  Col,
  H1,
  H3,
  H4,
  Card,
  Grid,
  Small,
  Strong,
  ResponsiveNavigation,
  Container,
  Text
} from 'gatsby-theme-landmarks-core'
import {
  Header,
  Footer,
  MoreDetails,
  FloorplanMini,
  ThemeBreadcrumbs
} from 'gatsby-theme-landmarks-developer'

export default props => {
  const { pageContext, logoSrc, logoAlt, metaTitle, metaDescription } = props
  const {
    publicThemeOptions,
    apartamentIndex,
    apartamentPicture,
    apartamente,
    relatedApartments,
    uniqueFloors,
    breadcrumb: { crumbs }
  } = pageContext
  const apartament = apartamente[apartamentIndex]
  const selectedFloorIndex = uniqueFloors.findIndex(x =>
    x.label.includes(apartament.floor)
  )
  const {
    uuid,
    price,
    floor,
    status,
    activ,
    model,
    floorplanposition,
  } = apartament
  const {
    // uuid: modelNumber,
    rooms,
    size,
    terrace,
    // image,
    description
  } = model
  const disponibil = status === APARTMENT_STATUS.DISPONIBIL

  return (
    <>
      <Helmet>
        <title>{`Apartament nr. ${uuid} | ${logoAlt}`}</title>
        {metaTitle && (
          <meta
            name="title"
            content={`Apartament nr. ${uuid} | ${logoAlt}`}
          />
        )}
        {metaDescription && (
          <meta name="description" content={metaDescription} />
        )}
      </Helmet>
      <Header logoSrc={logoSrc} logoAlt={logoAlt} />

      <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}
              sx={{
                pr: 4
              }}
              links={uniqueFloors}
            />
          </Col>

          <Col
            sx={{
              flex: ['auto', 'auto', 4]
            }}
          >
            <H1
              sx={{
                mt: 5,
                mb: !disponibil ? 2 : 5,
                marginBottom: '10px'
              }}
              variant="golden"
            >
              Apartament nr. {uuid}
            </H1>
            <ThemeBreadcrumbs crumbs={crumbs} />
            <Row sx={{ mb: 4, mt: 4 }}>
              <Col
                width={[12/12, 12/12, 6/12]}
                sx={{
                  mr: [null, null, 5],
                  mb: 4
                }}
              >
                <Img fluid={apartamentPicture.fluid} />
                <Text
                  variant="small"
                  sx={{
                    display: ['none', 'none', 'block'],
                    mt: 4
                  }}
                >
                  Acest material nu reprezinta o oferta sau un contract si are
                  scop informativ. Datorita schimbarilor ce pot interveni pe
                  durata constructiei, suprafetele, finisajele si specificatiile
                  tehnice pot suferi modificari fara o notificare prealabila dar
                  in deplina concordanta cu orice contract semnat. Apartamentele
                  se livreaza semifinisate.
                </Text>
              </Col>
              <Col
                sx={{
                  mt: [null, null, 4]
                }}
              >
                <H3
                  sx={{
                    backgroundColor: theme => theme.floorplan.colors[status],
                    color: 'white',
                    px: 4,
                    py: 3,
                    m: 0
                  }}
                >
                  <span
                    sx={{
                      opacity: 0.9
                    }}
                  >
                    {renderStatus(apartament)}
                  </span>
                </H3>
                <Card>
                  <Row
                    sx={{
                      display: 'flex',
                    }}
                  >
                    <Col>
                      <Strong>{rooms}</Strong> camere
                    </Col>
                    <Col>
                      Etaj <Strong>{apartament.floor}</Strong>
                    </Col>
                  </Row>

                  <Row
                    sx={{
                      display: 'flex',
                      mt: 4
                    }}
                  >
                    <Col>
                      <Small>
                        Suprafata utila
                        <br />
                      </Small>
                      <Strong>
                        {size}
                        <Small>mp</Small>
                      </Strong>
                    </Col>
                    <Col>
                      <Small>
                        Terasa
                        <br />
                      </Small>
                      <Strong>
                        {terrace}
                        <Small>mp</Small>
                      </Strong>
                    </Col>
                  </Row>
                </Card>
                <div sx={{ p: 4, maxWidth: '480px' }}>
                  <FloorplanMini
                    apartamente={apartamente}
                    selectedApNumber={uuid}
                  />
                </div>
              </Col>
            </Row>

            <Row>
              <Col>
                <Text
                  sx={{ p: 4, pt: 0 }}
                  dangerouslySetInnerHTML={{ __html: description }}
                />

                {disponibil && (
                  <div sx={{ maxWidth: '700px' }}>
                    <H3 sx={{ mt: 5 }}>Cere mai multe detalii</H3>
                    <MoreDetails apartament={apartament} />
                  </div>
                )}

                {!!relatedApartments.length && (
                  <>
                    <H3 sx={{ mt: 6 }}>Alte apartamente cu {rooms} camere</H3>
                    <Grid gap="5" columns={[1, 1, 3]}>
                      {relatedApartments.map(ap => (
                        <div>
                          <div
                            sx={{
                              height: ['350px', null, '300px'],
                              overflow: 'hidden'
                            }}
                          >
                            <Img fluid={ap.model.image.fluid} />
                          </div>
                          <Card>
                            <H4 sx={{ mb: 4 }}>Apartament {ap.uuid}</H4>
                            <Row
                              sx={{
                                display: 'flex'
                              }}
                            >
                              <Col>
                                <p>
                                  <CustomStrong>{ap.model.rooms}</CustomStrong>
                                  <span>camere</span>
                                </p>
                                <p>
                                  <CustomStrong>
                                    {ap.model.size}
                                    <Small>mp</Small>
                                  </CustomStrong>
                                  <span>suprafata utila</span>
                                </p>
                              </Col>
                              <Col>
                                <Button
                                  variant="primary"
                                  as={Link}
                                  to={ap.link}
                                >
                                  Vezi detalii
                                </Button>
                              </Col>
                            </Row>
                          </Card>
                        </div>
                      ))}
                    </Grid>
                  </>
                )}

                <Text
                  variant="small"
                  sx={{
                    mt: 3,
                    display: ['block', 'none']
                  }}
                >
                  Acest material nu reprezinta o oferta sau un contract si are
                  scop informativ. Datorita schimbarilor ce pot interveni pe
                  durata constructiei, suprafetele, finisajele si specificatiile
                  tehnice pot suferi modificari fara o notificare prealabila dar
                  in deplina concordanta cu orice contract semnat. Apartamentele
                  se livreaza semifinisate.
                </Text>

                <H4 sx={{ my: 5 }}>
                  <Link
                    to={`/${publicThemeOptions.apartamenteUrlSegment}/etaj-${apartament.floor}`}
                    sx={{
                      variant: 'links.default'
                    }}
                  >
                    Inapoi la etaj
                  </Link>
                </H4>
              </Col>
            </Row>
          </Col>
        </Row>
      </Container>
      <br />
      <Footer />
    </>
  )
}

const renderStatus = apartament => {
  if (apartament.status === APARTMENT_STATUS.DISPONIBIL && apartament.price) {
    return (
      <>
        {apartament.price.toLocaleString()}
        <span sx={{ fontSize: 4 }}>€</span>
      </>
    )
  }
  return apartament.status
}

const CustomStrong = props => (
  <Strong sx={{ display: 'block', lineHeight: '10px' }} {...props} />
)