// Input with calendar hint based on Calendar and Picker
// (c) Vitaliy Filippov 2021+
// Repository: http://yourcmc.ru/git/vitalif-js/calendar
// Version: 2021-10-17
// License: Dual-license MPL 2.0+ or GNU LGPL 3.0+

import React from 'react';
import PropTypes from 'prop-types';

import Calendar from './calendar-react.js';
import Picker from './Picker.js';

export function allowDate(ev)
{
    if (ev && ev.key && ev.key.length == 1 && !/[\d\-\.]/.exec(ev.key))
    {
        ev.preventDefault();
    }
}

export default class CalendarInput extends Picker
{
    static propTypes = {
        value: PropTypes.oneOfType([ PropTypes.string, PropTypes.instanceOf(Date) ]),
        onChange: PropTypes.func.isRequired,
        className: PropTypes.string,
        placeholder: PropTypes.string,
        closeLabel: PropTypes.string,
        monthNames: PropTypes.arrayOf(PropTypes.string),
        weekdays: PropTypes.arrayOf(PropTypes.string),
        weekdayIds: PropTypes.arrayOf(PropTypes.string),
        sunday: PropTypes.number,
        minDate: PropTypes.oneOfType([ PropTypes.oneOf(['today']), PropTypes.instanceOf(Date) ]),
        maxDate: PropTypes.oneOfType([ PropTypes.oneOf(['today']), PropTypes.instanceOf(Date) ]),
        format: PropTypes.oneOf([ 'dmy', 'ymd' ]),
        withTime: PropTypes.bool,
        startMode: PropTypes.oneOf([ 'days', 'months', 'years' ]),
        style: PropTypes.object,
    }

    setText = (ev) => this.props.onChange(ev.target.value)

    renderInput = (props) => (<input
        onBlur={props.onBlur}
        onFocus={props.onFocus}
        onClick={props.onFocus}
        onKeyDown={allowDate}
        ref={props.ref}
        style={this.props.style}
        className={this.props.className}
        type="text"
        value={this.props.value||''}
        onChange={this.setText}
        placeholder={this.props.placeholder}
    />)

    renderPicker = (props) => (<Calendar
        ref={this.animatePicker}
        value={this.props.value}
        onChange={this.props.onChange}
        hide={props.blur}
        monthNames={this.props.monthNames}
        closeLabel={this.props.closeLabel}
        weekdays={this.props.weekdays}
        weekdayIds={this.props.weekdayIds}
        sunday={this.props.sunday}
        minDate={this.props.minDate}
        maxDate={this.props.maxDate}
        format={this.props.format}
        withTime={this.props.withTime}
        startMode={this.props.startMode}
    />)

    render()
    {
        return (<Picker
            direction={this.props.direction}
            minWidth={this.props.minWidth}
            autoHide={true}
            renderInput={this.renderInput}
            renderPicker={this.renderPicker}
            usePortal={true}
        />);
    }
}