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

export const FloorplanMini = props => {
  const { apartamente, selectedApNumber } = props

  return (
    <svg viewBox="0 0 670 670" version="1.1" xmlns="http://www.w3.org/2000/svg">
      {apartamente.map(ap => {
        const [planX, planY] = ap.floorplanposition.split('/')
        const isSelected = ap.number === selectedApNumber

        return (
          <Box
            as="g"
            transform={`translate(${planX}, ${planY})`}
            sx={{
              variant: 'floorplan.apartment',
              '& #diamond': {
                display: 'none'
              },
              '#floor': {
                fill: theme => isSelected && 'secondary'
              },
              '#terrace': {
                fill: theme => isSelected && 'secondaryLighter',
              }
            }}
          >
            <Box
              as="g"
              dangerouslySetInnerHTML={{ __html: ap.model.floorplan }}
            />
          </Box>
        )
      })
    }
    </svg>
  )
}