import React, { Component } from 'react';
import { withRouter, } from "react-router-dom";
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

// export default function MyApp() {
class CalendarPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
    	date:new Date()
    }
  }

  componentDidMount() {
  	const {date} = this.state.date;
    this.getMeettingByDate(date)
  }



  getMeettingByDate = (date) => {
  	const y = new Date(date).getFullYear();
  	const m = this.addZero(new Date(date).getMonth() + 1);
  	const d = this.addZero(new Date(date).getDate());
  	let selected_date = y+'-'+m+'-'+d;

  	// fetch(`https://tarjeta.id/REST/controllers/payController.php?opt=existAppIdSecret`, {
   //    method: "POST",
   //    mode: "cors",
   //    body: JSON.stringify( {
   //      date
   //    } ),
   //  })
   //  .then(res => res.json())
   //  .then((res) => {

   //  })
  	console.log('Peticion ajax', selected_date)
  }

  addZero = (val) => {
  	return val < 10 ? ('0' + val) : val
  }

  onChange = (date) => {
  	this.setState({date})
  	this.getMeettingByDate(date)
  }

  render() {
	  return (
	    <div className="Sample">
	      <div className="Sample__container">
	        <main className="Sample__container__content">
	          <Calendar
	            onChange={this.onChange}
	            value={this.state.date}
	          />
	        </main>
	      </div>
	    </div>
	  );
  }
}

export default withRouter(CalendarPage)