import React, { Component } from 'react'
import GoogleMapReact from 'google-map-react'
import { Segment, Input, Message, Grid, Header, Button, Icon, Image, Dropdown } from 'semantic-ui-react'
import PropTypes from 'prop-types';
import LanguageSwitcher from '../../components/LanguageSwitcher';
import ResourcesMappingLanguaje from './ResourcesMappingLanguaje';
import './style.scss';

import 'font-awesome/css/font-awesome.css';

const Client = ({ color }) => <h1 style={{ color }}><i className="fa fa-map-marker" /></h1>
const Marker = ({ color = 'green', icon = 'fa-map-marker' }) => <h1 style={{ color }}><i className={`fa ${icon} fa-1x`} /></h1>
const paintMarker = (item, i) => {
  const { location } = item.geometry;
  return (<Marker
    key={i}
    lat={location.lat}
    lng={location.lng}
    color={item.color}
    icon={item.faIcon}
  />)
}
export default class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      resourcesList: this.props.resourcesList,
      selectedLanguage: this.props.selectedLanguage,
      selectedFilter: 'market'
    }
    this.filter = this.filter.bind(this);
    this.paintButtons = this.paintButtons.bind(this);
  }

  filter(event, data) {
    const { types } = data;
    let resourcesList = [...this.props.resourcesList];
    let resourcesListFiltered = resourcesList.filter(item => {
      const a = (item.types === types) ? item : null
      return a;
    });
    this.setState({
      resourcesList: resourcesListFiltered
    })
  }
  paintButtons(item, i) {
    const a = (i === (this.props.listButtons.length - 1));
    console.log('este es el only', a);
    return (
      <Button basic animated='vertical' key={i} onClick={this.filter} types={item.types} className="resourcesMappping__buttons_container_button">
        <Button.Content hidden>{item.value}</Button.Content>
        <Button.Content visible>
          <i className={`fa ${item.faIcon} fa-1x`} />
        </Button.Content>
      </Button>
    )
  }
  render() {
    const { center, showTitleText, listButtons, showHeader, showTitle, sponsorIcon, showTitleIcon, showLanguageDropdown, showLocationSearch, icon, toSeeMore } = this.props;
    const { resourcesList } = this.state;
    const style = {
      width: '100 %',
      height: '100 %'
    }
    return (
      <Segment.Group className="resourcesMappping">
        <Segment>
          <Grid>
            {showHeader && <Grid.Row className="Segment_Header">
              {showTitle && <Grid.Column mobile="sixteen" tablet="twelve" computer="eleven" className="Segment_Header">
                <Header as='h2'>
                  {showTitleIcon && <Icon name='superpowers' className="resourcesMappping__segment_header_Container_icon" />}
                  {showTitleText && <Header.Content>
                    {ResourcesMappingLanguaje[this.state.selectedLanguage].mapTittle}
                  </Header.Content>}
                </Header>
              </Grid.Column>}
              {showLanguageDropdown && <Grid.Column mobile="sixteen" tablet="four" computer="five" className="Segment_Header" >
                <LanguageSwitcher
                  onLanguageChange={(language) => {
                    this.setState({ selectedLanguage: language });
                  }}
                />
              </Grid.Column>}
            </Grid.Row>}
            <Grid.Row >
              <Grid.Column mobile="sixteen" tablet="sixteen" computer="sixteen" floated="right">
                <div className="resourcesMappping__buttons_container">
                  {
                    listButtons.map(this.paintButtons)
                  }
                </div>
              </Grid.Column>
            </Grid.Row>

            <Grid.Column mobile="sixteen" tablet="sixteen" computer="sixteen" className="resourcesMappping__segment">
              <div className='google-map resourcesMappping__segment__mapContainer'>
                <GoogleMapReact defaultCenter={this.props.center} defaultZoom={this.props.zoom}>
                  <Client lat={center.lat} lng={center.lng} />
                  {
                    resourcesList.map(paintMarker)
                  }
                </GoogleMapReact>
              </div>
            </Grid.Column>
            <Grid.Column mobile="sixteen" tablet="sixteen" computer="sixteen">
              <svg width="100" height="100">
                <image xlinkHref={sponsorIcon} x="0" y="0" width="100%" height="100%" />
              </svg>
            </Grid.Column>
          </Grid>
        </Segment >
      </Segment.Group >
    )
  }
}



Map.propTypes = {
  resourcesList: PropTypes.array,
  listButtons: PropTypes.array,
  center: PropTypes.object,
  zoom: PropTypes.number,
};

Map.defaultProps = {
  listButtons: [],
  resourcesList: [],
  center: {},
  zoom: 13,
  selectedLanguage: 'en',
  sponsorIcon: "https://res.cloudinary.com/front10/image/upload/t_media_lib_thumb/v1524326358/resilient-city/miami-dade_color.jpg",
  showHeader: true,
  showTitle: true,
  showTitleIcon: true,
  showTitleText: true,
  titleText: "Find resources",
  icon: "images/icons/hurricane.png",
  showLanguageDropdown: true,
  showLocationSearch: true,
  toSeeMore: "http://www.miamidade.gov/emergency/"
};