import React, { forwardRef, useState } from "react";
import './date-picker.css';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"; 
import Iconsvg from '../../Ui/Icon/Icon'

type Props = {
    label: string,
    id:string,
    name:string,
    readonly?: boolean,
    disable?: boolean,
    pickerType: 'Date' | 'Time',
    timeIntervals?: number,
    helperText?: string,
    error?: boolean,
    errorMessage?: string,
    size?: 'default' | 'small' | 'medium' | 'large',
    icon?:boolean,
    timeFormat?: 'HH:mm' | 'hh:mm a',
    placeholder?: string,
    borderRadious?: 'small' | 'medium' | 'large',
    variant?: 'default' |'primary' | 'secondary',
    iconName?:any,
    dateChange:(event:Date) => void;
}



const DateBox = (props:Props) => {
    const [startDate, setStartDate] = useState<Date>();
    const {label, id, name, error, size,icon, pickerType,timeIntervals, timeFormat,variant, helperText, borderRadious,iconName, errorMessage, dateChange, placeholder, disable, readonly} = props;
    const handleChange = (value:any, e:any) => {
        // if(value){
        //     dateChange(value)
        // }
        setStartDate(value)
    }
    const CustomInput = (props: React.HTMLProps<HTMLInputElement>, ref: React.Ref<HTMLInputElement>) => {
        return (
            <div>
                <input  {...props}  className="date-control"/>
                {(icon && pickerType === 'Date') ? <span onClick={props.onClick} className='right'><Iconsvg addClass={`${size ? `icon-${size}` : ''}`} name={iconName}/></span> : ''}
                {(icon && pickerType === 'Time') ? <span onClick={props.onClick} className='right'><Iconsvg addClass={`${size ? `icon-${size}` : ''}`} name={iconName}/></span> : ''}
            </div>
        );
    };
    return (
        <div className={`date-form-group ${error ? 'error' : ''} form-${size} ${variant ? `background-${variant}` : ''} ${borderRadious ? `rounded-${borderRadious}` : ''}`}>
            <label className='control-label'>{label}</label>
            <div className='date-group'>
            { pickerType === 'Date' ?

                    <DatePicker 
                    id={id} 
                    name={name}
                    selected={startDate}
                    dateFormat="dd/MM/yyyy"
                    customInput={React.createElement(React.forwardRef(CustomInput))}
                    placeholderText={placeholder}
                    onChange={(value, e) => handleChange(value, e)}
                    disabled={disable}
                    readOnly={readonly}
                    /> 
                : 

                    <DatePicker 
                        id={id} 
                        name={name}
                        selected={startDate}
                        dateFormat="hh:mm a"
                        timeFormat={timeFormat}
                        customInput={React.createElement(React.forwardRef(CustomInput))}
                        showTimeSelect
                        showTimeSelectOnly
                        timeCaption="Time"
                        timeIntervals={timeIntervals}
                        placeholderText={placeholder}
                        onChange={(value, e) => handleChange(value, e)}
                        disabled={disable}
                        readOnly={readonly}
                    /> 
                
                }
            </div>
            {(error && errorMessage) && <p className='error-text'>{errorMessage}</p>}
            {(!error && helperText) && <p className='helper-text'>{helperText}</p>}
        </div>
    );
};

export default DateBox;