import React, { useState, useEffect } from 'react'
import { debounce } from 'lodash'
import moment from 'moment'
import { format } from 'date-fns'
import { Input, InputPopdown, InputCalendar, InputTime } from 'atti-components'

const dateRegex = /^([0-9]|[0-2][0-9]|3[0-1])\/([0-9]|0[0-9]|1[0-2])\/([0-9]{4}) ([0-9]|[0-1][0-9]|2[0-3]):([0-9]|[0-5][0-9]):([0-9]|[0-5][0-9])$/gi

const SingleDatePicker = ({ id, disabled, value, t, onChange, ...rest }) => {
    let currentValue = null
    if (moment.isDate(value)) {
        currentValue = value
    } else if(moment.isMoment(value)) {
        currentValue = value.toDate()
    }

    const [inputDateValue, setInputDateValue] = useState(!currentValue? "": format(currentValue, "DD/MM/YYYY HH:mm:ss"))
    const handleOnChange = date => {
        onChange(moment(date))
        const newValue = !date? "": format(date, "DD/MM/YYYY HH:mm:ss")
        if (newValue !== inputDateValue) {
            setInputDateValue(newValue)
        }
    }

    const handleParseDate = debounce((value) => {
        const parseDate = moment(value, "DD/MM/YYYY HH:mm:ss").toDate()
        if (parseDate instanceof Date && !isNaN(parseDate) && value.match(dateRegex)) {
            handleOnChange(parseDate)
        }
    }, 1000)

    const handleTextualChange = e => {
        try {
            setInputDateValue(e.target.value)
            handleParseDate(e.target.value)
        } catch (e) { }
    }

    return (<InputPopdown
            enhancer={() => (<React.Fragment>
                <InputCalendar value={currentValue} onChange={handleOnChange} />
                <InputTime value={currentValue} onChange={handleOnChange} />
            </React.Fragment>)}
        >
            <Input
                value={inputDateValue}
                onChange={handleTextualChange}
                placeholder="DD/MM/YYYY H:m:s"
            />
        </InputPopdown>)
}

export default SingleDatePicker