 // LIBRARIES
import React, { Component } from 'react';
import { Button, Modal } from "antd"
import { compose, withProps, lifecycle } from "recompose"
import { GoogleMap, withScriptjs, withGoogleMap, Marker } from 'react-google-maps';

  const containerStyle = {
    width: '100%',
    height: '200px'
  };
  // const MyMapComponent = compose(
  //   withProps({
  //       googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyARzdIELzb2Uvoly4-Er4B7-QzXKr4j3bg&libraries=geometry,drawing,places",
  //       loadingElement: <div style={{ height: `100%` }} />,
  //       containerElement: <div style={{ height: `400px` }} />,
  //       mapElement: <div style={{ height: `100%` }} />,
  //   }),
  //   lifecycle({
  //     componentWillMount() {
  //       const refs = {}
  //       this.setState({
  //         position: null,
  //         onMarkerMounted: ref => {
  //           refs.marker = ref;
  //         },
  //         onPositionChanged: () => {
  //           const position = refs.marker.getPosition();
  //           console.log(refs.marker.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.mapUrl)
  //           let urlMap =refs.marker.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.mapUrl
  //           let sample = position.toString()
  //           let lat = sample.split(',')[0].substring(1)
  //           let long = sample.split(',')[1].slice(1,-1)
  //           console.log(sample)
  //         }
  //       })
  //     },
  //   }),
  //   withScriptjs,
  //   withGoogleMap
  // )
  // ((props) =>
  //   <GoogleMap defaultZoom={18} center={props.center}>
  //       {props.isMarkerShown && <Marker position={props.center} draggable={false} ref={props.onMarkerMounted} onPositionChanged={props.onPositionChanged} />}
  //   </GoogleMap>
  // )

  class LocationModal extends Component {
    state= {};

    render() {
      let {data}=this.props,
      center1={lat:parseFloat(data.lat), lng:parseFloat(data.long)},
      branch={...data.Branch}
      console.log('datass', data)
      return (
        <Modal id='locationAddModal'
          title="Station Location"
          visible={this.props.visible}
          closable={false}
          footer={[
            <Button key="back" onClick={this.props.cancel}>
              Close
            </Button>
          ]}
        >
        {/* <MyMapComponent isMarkerShown={true} center={center1}/> */}
        <iframe src={data.map_Url + "&output=embed"} width="460" height="400" frameborder="0" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
        <div style={{paddingTop: '15px'}}><p>Station: {data.name}</p><p style={{marginBottom: '0px'}}>Branch: {branch.name}</p></div>
        </Modal>
      );
    }
  }
  
  export default LocationModal;