import React from 'react'
import { render } from 'react-dom'

// ... and sardius-fullcalendar-wrapper.
import FullCalendar from 'sardius-fullcalendar-wrapper'

// ... and any fullcalendar plugins you may require
import interactionPlugin from '@fullcalendar/interaction'
import dayGridPlugin from '@fullcalendar/daygrid'

// ... and any fullcalendar specific css
import '@fullcalendar/core/main.css'
import '@fullcalendar/daygrid/main.css'

const today = new Date()
const tomorrow = new Date()

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props)
    this.fullCalendar = React.createRef()
    this.state = {
      events: [
        {
          title: 'Example Event',
          start: today
        },
        {
          title: 'Example Event',
          start: tomorrow.setDate(today.getDate() + 1)
        }
      ]
    }
  }

  eventClicked = (eventClickInfo) => {
    alert('Event has been clicked!')
  }

  getView = () => {
    let calendarApi = this.fullCalendar.current.getApi()
    let view = calendarApi.getView()
    console.log(view)
  }

  handleNext = () => {
    let calendarApi = this.fullCalendar.current.getApi()
    calendarApi.next()
  }

  selectEvent = selectionInfo => {
    alert('Event Selected!')
  }

  render() {
    return (
      <div>
        <button onClick={ this.handleNext }>goto next</button>
        <FullCalendar
          ref={this.fullCalendar}
          header={{
            left: 'prev,today,next',
            center: 'title',
            right: 'dayGridMonth, dayGridWeek, dayGridDay'
          }}
          // Example of an option set to false (only required if the default is true)
          navLinks={false}
          allDaySlot={false}
          // Load in this calendar's events
          events={this.state.events}
          // Example of a callback / handler function
          select={selectionInfo => {
            this.selectEvent(selectionInfo)
          }}
          // Another example of a callback / handler function
          eventClick={eventClickInfo => {
            this.eventClicked(eventClickInfo)
          }}
          // Add in required plugins for the options that you selected above
          plugins={[
            interactionPlugin,
            dayGridPlugin
          ]}
          // Example of an option set to true
          editable
          nowIndicator
          selectable
          snapDuration="00:05"
          defaultView="dayGridMonth"
        />
      </div>
    )
  }
}

render(<ExampleComponent />, document.getElementById('root'))