import React, { useState } from 'react'
import dayjs from 'dayjs'
import { WatDatePicker } from 'greentea-thaidatepicker-react'

const App = () => {
  const [selectedDate, setSelectedDate] = useState("2020-04-27")
  const [selectedThaiDate, setSelectedThaiDate] = useState("2563-04-27")

  const handleWatDatePickerChange = (christDate, buddhistDate) => {
    console.log(christDate)
    console.log(buddhistDate);
    setSelectedDate(christDate)
    setSelectedThaiDate(buddhistDate)
  }

  return (
    <>
      <WatDatePicker
        value={selectedDate} // Can be replace with string or dayjs object (e.g. "2020-12-31" or `dayjs()`)
        onChange={handleWatDatePickerChange}
        dateFormat={'yyyy-MM-dd'} // for set data purpose [using date-fns format](https://date-fns.org/v2.12.0/docs/format)
        displayFormat={'dd, DD MMMM YY'} // for display purpose (using dayjs format)[https://day.js.org/docs/en/display/format]
        inputStyle={{ color: 'red' }} // styles for input
        minDate={'2020-12-26'} // supported date as string
        maxDate={dayjs().add(20, 'day')} // also supported dayjs or moment
      />
    </>
  )
}

export default App