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

import React from 'react'
import { Helmet } from 'react-helmet'
import { navigate } from 'gatsby'
import { APARTMENT_STATUS } from '../../config'

const Apartament = props => {
  const [planX, planY] = props.floorplanposition.split('/')
  const [pinX, pinY] = props.model.pinposition.split('/')
  const disponibil = props.status === APARTMENT_STATUS.DISPONIBIL
  const inactiv = props.status === APARTMENT_STATUS.INACTIV

  return (
    <Box
      as="g"
      transform={`translate(${planX}, ${planY})`}
      className={props.className}
      onClick={() => !inactiv && navigate(props.link)}
      sx={{
        variant: 'floorplan.apartment', // get the value from the theme
        cursor: 'pointer',
        '& #diamond': {
          fill: theme => theme.floorplan.colors[props.status]
        },
        '&:hover': {
          '#diamond': {
            strokeWidth: !inactiv && '7px',
            stroke: theme => theme.floorplan.colors[props.status]
          },
          '#floor': {
            fill: theme => disponibil && 'secondary'
          },
          '#terrace': {
            fill: theme => disponibil && 'secondary'
          },
          text: {
            fontSize: !inactiv && '14px'
          }
        },
        ...(inactiv && {
          cursor: 'initial',
          opacity: 0.4
        })
      }}
    >
      <Box as="g" dangerouslySetInnerHTML={{ __html: props.children }} />
      <text
        transform={`translate(${pinX}, ${pinY})`}
        sx={{
          fontSize: '11px',
          textAnchor: 'middle',
          fill: 'white'
        }}
      >
        {props.uuid}
      </text>
    </Box>
  )
}

export const Floorplan = props => {
  const { apartamente } = props

  return (
    <div
      sx={{
        overflow: 'hidden',
        mx: ['-16px', '-16px', 0]
      }}
    >
      <Helmet>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=3"
        />
      </Helmet>
      <svg
        viewBox="0 0 670 670"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        sx={{
          display: 'block',
          width: ['100vw', '100vw', '100%'],
          // width: ['auto', 'auto', '100%'],
          // height: ['100vh', '90vh', 'auto'],
          backgroundImage: `url(${props.background})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          backgroundSize: 'cover',
          p: '85px',
          px: [0, 0, '85px']
        }}
      >
        {apartamente.map(ap => (
          <Apartament key={`ap-${ap.floor}-${ap.uuid}`} {...ap}>
            {ap.model.floorplan}
          </Apartament>
        ))}
      </svg>
    </div>
  )
}