import React from 'react'
import { useDispatch } from 'react-redux'
import { updateHoliday } from '../reducers/holiday-settings'
import formatDate from '../utils/formatDate'
import stringToDate from '../utils/stringToDate'
import FieldDate from './fields/DateField'

const HolidayItem = ({item}) => {
  const dispatch = useDispatch()
  const handleStartChange = (date) => {
    dispatch(
      updateHoliday({
        id: item.id,
        data: {
          startDate: formatDate(date)
        }
      })
    )
  }
  const handleEndChange = (date) => {
    dispatch(
      updateHoliday({
        id: item.id,
        data: {
          endDate: formatDate(date)
        }
      })
    )
  }
  return (
    <tr className="dreamfox-holiday-item">
      <td>{item.label}</td>
      <td>Start Date</td>
      <td>
        <FieldDate startDate={stringToDate(item.startDate)} onChange={handleStartChange} />
      </td>
      <td>End Date</td>
      <td>
        <FieldDate startDate={stringToDate(item.endDate)} onChange={handleEndChange} />
      </td>
    </tr>
  )
}

export default HolidayItem
