import React, { Component } from 'react'
import Dropdown from 'react-dropdown';
import 'react-dropdown/style.css';
import * as d3 from "d3";
import * as d3Axis from 'd3-axis'
import { select as d3Select } from 'd3-selection'
import *  as dataParser from '../dataParser.js';
import CalendarRadial from '../CalendarRadial/CalendarRadial'

import './calendar.scss'


class Calendar extends Component {


  constructor(props) {
    super(props);
    console.log('calendar props ', this.props.monthData['2017-03-03'])
    this.state = {
      oneDay: this.props.monthData['2017-03-03']
    }
  }

  render() {

    return (
      <div className="calendar">
        <CalendarRadial currentDay={'2017-03-03'}
          dataDayHours={dataParser.getDayHoursArr(this.props.monthData, '2017-03-03')}
          dayInsights={this.props.monthData}
          lineType={this.props.lineType}
          clockConfig={this.props.clockConfig} />
        <CalendarRadial currentDay={'2017-03-04'}
          dataDayHours={dataParser.getDayHoursArr(this.props.monthData, '2017-03-04')}
          dayInsights={this.props.monthData}
          lineType={this.props.lineType}
          clockConfig={this.props.clockConfig} />
        <CalendarRadial currentDay={'2017-03-05'}
          dataDayHours={dataParser.getDayHoursArr(this.props.monthData, '2017-03-05')}
          dayInsights={this.props.monthData}
          lineType={this.props.lineType}
          clockConfig={this.props.clockConfig} />
      </div>
    )
  }
}

export default Calendar;