import React, { useState } from 'react'
import { Grid, Paper } from '@material-ui/core'
import { makeStyles, useTheme } from '@material-ui/core/styles'
import clsx from 'clsx'
import MapGL, { Marker } from '@urbica/react-map-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { GridList, GridListTile, Button } from '@material-ui/core'
import StarredProperties from './StarredProperties'
import { useMutation } from '@apollo/react-hooks'
import gql from 'graphql-tag'

export default function MapResults(props) {
  console.log(props.properties)
  const theme = useTheme()

  const [onStarHandler, { data, loading, error }] = useMutation(gql`
    mutation starPropertyMutation($id: ID!) {
      starProperty(id: $id) {
        id
        address
      }
    }
  `)

  const style = {
    padding: '4px',
    color: '#fff',
    cursor: 'pointer',
    background: '#1978c8',
    borderRadius: '50%',
  }

  const useStyles = makeStyles((theme) => ({
    root: {
      display: 'flex',
    },
    paper: {
      padding: theme.spacing(2),
      display: 'flex',
      overflow: 'auto',
      flexDirection: 'column',
    },
    fixedHeight: {
      height: 540,
    },
  }))
  const classes = useStyles(theme)
  const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight)

  const [viewport, setViewport] = useState({
    latitude: 45.667397,
    longitude: -111.054718,
    zoom: 13,
  })

  const [currentProperty, setCurrentProperty] = useState(props.properties[0])

  return (
    <React.Fragment>
      <Grid container spacing={4}>
        <Grid item xs={12} md={2} lg={2}>
          <Paper className={fixedHeightPaper}>
            <StarredProperties />
          </Paper>
        </Grid>
        <Grid item xs={12} md={7} lg={6}>
          <Paper className={fixedHeightPaper}>
            <MapGL
              style={{ width: '100%', height: '100%' }}
              mapStyle="mapbox://styles/mapbox/light-v9"
              accessToken={process.env.REACT_APP_MAPBOX_TOKEN}
              latitude={viewport.latitude}
              longitude={viewport.longitude}
              zoom={viewport.zoom}
              onViewportChange={setViewport}
            >
              {props.properties.map((p, i) => {
                return (
                  <Marker
                    key={i}
                    longitude={p.location.longitude}
                    latitude={p.location.latitude}
                  >
                    <div
                      onClick={() => setCurrentProperty(p)}
                      style={style}
                    ></div>
                  </Marker>
                )
              })}
            </MapGL>
          </Paper>
        </Grid>
        <Grid item xs={12} md={3} lg={4}>
          <Paper className={fixedHeightPaper}>
            <p>{currentProperty.address}</p>
            <Button
              onClick={() =>
                onStarHandler({ variables: { id: currentProperty.id } })
              }
            >
              Star Property
            </Button>
            <ul>
              <li>Square feet: {currentProperty.sqft}</li>
              <li>Bedrooms: {currentProperty.bedrooms}</li>
              <li>Full baths: {currentProperty.full_baths}</li>
              <li>Half baths: {currentProperty.half_baths}</li>
            </ul>
            <GridList cellHeight={160} cols={2}>
              {currentProperty.photos.map((v, i) => (
                <GridListTile key={i} cols={1}>
                  <img src={v.url}></img>
                </GridListTile>
              ))}
            </GridList>
          </Paper>
        </Grid>
      </Grid>
    </React.Fragment>
  )
}