import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { updateDisableDay } from '../reducers/holiday-settings'
import LabelField from './fields/LabelField'

const DaysForDelivery = () => {
  const dispatch = useDispatch()
  const weekdays = useSelector(state => {
    return state.holidaySettings.disableDays
  })
  const handleChange = (index, e) => {
    console.log(e.target.checked)
    dispatch(updateDisableDay({id: index, checked: e.target.checked}))
  }
  const getElementId = (id) => {
    return 'dreamfox-field-' + id
  }
  return (
    <div className="dreamfox-delivery-days dreamfox-holidays__row">
      <LabelField className="dreamfox-delivery-days__label">Disable Days for Delivery</LabelField>
      <div className="dreamfox-delivery-days__content">
        {weekdays.map(item => <div key={item.id} className="dreamfox-delivery-days__item">
          <label htmlFor={getElementId(item.id)}>{item.label}</label>
          <input
            id={getElementId(item.id)}
            type="checkbox"
            checked={item.checked}
            onChange={e => handleChange(item.id, e)}
            onClick={e => handleChange(item.id, e)}
          />
        </div>)}
      </div>
    </div>
  )
}

export default DaysForDelivery
