/*
 * NOTE: The Babel plugin will automatically process the `tw()` function, which
 * means we don’t actually need to import it. ESLint will complain about this,
 * however, so we need to add `tw` as a global variable.
 */

/* global tw */
import React from 'react'
import styled from 'react-emotion'
import { graphql } from 'gatsby'
import Layout from "../components/layout"
import SEO from "../components/seo"
import Space from "../components/space"
import { Link } from "gatsby"
import Modal from 'react-modal';
import Form from '../components/form'
import { colors } from "../components/theme"
import Search from '../components/search';
import Toggle from '../components/toggle';
import Button from '../components/button';

Modal.setAppElement('body');

const SpacesWrapper = styled('section')`
	${tw`flex flex-wrap mx-auto mt-4`}
`

const SpaceWrapper = styled('div')`
	${tw`w-1/3`}
`

const StyledModal = styled(Modal)`
	${tw`fixed w-full h-full p-16 overflow-hidden flex flex-row align-items-center justify-content-center`}
`

const ModalDialog = styled('div')`
	${tw`bg-white shadow-xl flex flex-row w-full h-full z-50 mx-auto`}
	max-width: 1560px;
`

const ModalClick = styled('div')`
  ${tw`absolute pin-t pin-l w-full h-full`}
`

const SearchInputWrapper = styled('div')`
	${tw`max-w-lg mx-auto relative`}
`

const FilterWrapper = styled('div')`
	${tw`flex flex-row align-center justify-center`}
`

const ToggleWrapper = styled('div')`
	${tw`px-4`}
`

export default class Index extends React.Component {
	constructor(props) {
        super(props);
        this.state = {
					search: "",
					fastWifi: false,
					filterSockets: false,
					filterRating: false,
					openToday: false,
					modalIsOpen: false,
					userLat : false,
					userLng: false
				};
				this.openModal = this.openModal.bind(this);
				this.afterOpenModal = this.afterOpenModal.bind(this);
				this.closeModal = this.closeModal.bind(this);
				this.filterSpeed = this.filterSpeed.bind(this);
				this.filterSockets = this.filterSockets.bind(this);
				this.filterRating = this.filterRating.bind(this);
	}

	openModal() {
			this.setState({modalIsOpen: true});
	}

	afterOpenModal() {
			document.body.style.overflow = "hidden";
			document.querySelector('.geosuggest__input').focus();
	}

	closeModal() {
			this.setState({modalIsOpen: false});
			document.body.style.overflow = "auto";
	}

	updateSearch(event) {
		this.setState({search: event.target.value});
	}

	filterSpeed() {
		if (this.state.fastWifi){
			this.setState ({
				fastWifi: 0
			});
		} else {
			this.setState ({
					fastWifi: 20
			});
		}
	}

	filterSockets() {
		if (this.state.filterSockets){
			this.setState ({
				filterSockets: false
			});
		} else {
			this.setState ({
					filterSockets: true
			});
		}
	}

	filterRating() {
		if (this.state.filterRating){
			this.setState ({
				filterRating: false
			});
		} else {
			this.setState ({
					filterRating: true
			});
		}
	}

	filterOpenToday() {
		if (this.state.openToday){
			this.setState ({
				openToday: false
			});
		} else {
			this.setState ({
					openToday: true
			});
		}
	}


  render() {

	const sockets = this.state.filterSockets;
	const rating = this.state.filterRating;

	function filteredRating() {
		if (rating) {
			return ({ node }) => (node.rating >= 4.5);
		} else {
			return ({ node }) => (node.rating >= 0);
		}
	}

	const filteredSpeed = ({node}) => (node.speed >= this.state.fastWifi);

	function filteredSockets() {
		if (sockets) {
			return ({ node }) => (node.sockets === "Some" || node.sockets === "Many");
		} else {
			return ({ node }) => (node.sockets === "Some" || node.sockets === "Many" || node.sockets === "None");
		}
	}


	let filteredResults = this.props.data.allGoogleSheetSpacesRow.edges.filter(
		({node}) => (
			node.space.toLowerCase().includes(this.state.search.toLowerCase()) || node.location.toLowerCase().includes(this.state.search.toLowerCase()) || node.type.toLowerCase().includes(this.state.search.toLowerCase())
		)
	);


    return (
      <Layout>
				<SEO title="Spaces" keywords={[`gatsby`, `application`, `react`]} />
				<Button classes="sm" onClick={this.openModal} title="Add a space" />
				<SearchInputWrapper>
					<Search value={this.state.search} onChange={this.updateSearch.bind(this)} />

					<FilterWrapper>

						<ToggleWrapper>
							<Toggle
								name="fastWifi"
								label="Fast Wifi"
								onChange={this.filterSpeed}
							/>
						</ToggleWrapper>

						<ToggleWrapper>
							<Toggle
									name="socketsAvailable"
									label="Sockets"
								onChange={this.filterSockets}
								/>
						</ToggleWrapper>

						<ToggleWrapper>
							<Toggle
								name="highRating"
								label="High rating"
							onChange={this.filterRating}
							/>
						</ToggleWrapper>


					</FilterWrapper>

				</SearchInputWrapper>

					{
						navigator.geolocation.getCurrentPosition(
								(position) => {
										let lat = position.coords.latitude
										let lng = position.coords.longitude
										console.log("getCurrentPosition Success " + lat + lng) // logs position correctly
										this.setState({
												userLat: lat,
												userLng: lng
										})
								},
								(error) => {
										//this.props.displayError("Error dectecting your location");
										console.error(JSON.stringify(error))
								},
								{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
						)
					}

				<SpacesWrapper>
					{filteredResults.filter(filteredSpeed).filter(filteredSockets()).filter(filteredRating()).sort((a, b) => a.node.onCalculateDistance - b).map(({ node }) => {
						return (
							<SpaceWrapper key={node.id}>
								<Space node={node} userLat={this.state.userLat} userLng={this.state.userLng} onCalculateDistance={this.distanceChange} />
							</SpaceWrapper>
						)}
					)}
				</SpacesWrapper>
				<StyledModal
						closeTimeoutMS={300}
						isOpen={this.state.modalIsOpen}
						onAfterOpen={this.afterOpenModal}
						onRequestClose={this.closeModal}
						shouldCloseOnOverlayClick={true}
						contentLabel="Form Modal"
						style={{
							overlay: {
								backgroundColor: 'rgba(22, 24, 35, 0.95)',
								overflow: 'hidden'
							}
						}}
						>
					<ModalClick onClick={this.closeModal}></ModalClick>
					<ModalDialog id="ModalDialog">
						<Form />
					</ModalDialog>
				</StyledModal>
      </Layout>
    )
  }
}

export const query = graphql`
	query Spaces {
		allGoogleSheetSpacesRow {
			edges {
				node {
					id
					space
					city
					location
					type
					speed
					password
					sockets
					twitter
					timestamp
					latitude
					longitude
					website
					mapsurl
					twitter
					rating
					monday
					tuesday
					wednesday
					thursday
					friday
					saturday
					sunday
				}
			}
		}
	}
`