import React from 'react';
import {TimePicker} from "@mui/x-date-pickers";
import './customdatetimepicker.scss';
import dayjs from 'dayjs';

type CustomTimePickerProps = {
    value: any
    onChange: any
    minTime?: string
    maxTime?: string
    text?:string
    readOnly?:boolean
    hasError?: string
}

const CustomTimePicker = ({value, onChange, text, maxTime='23:59:59', minTime='00:00:00', readOnly=false, hasError}: CustomTimePickerProps) => {

    return (

        <>
            <TimePicker
                readOnly ={readOnly}
                minTime={dayjs('2023-01-01T'+minTime)}
                maxTime={dayjs('2023-01-01T'+maxTime)}
                value={value}
                onChange={onChange}
                ampm={false}
                renderInput={({ inputRef, inputProps, InputProps }) => (
                    <div className={'rendered-date-time'}>
                        <input ref={inputRef}
                               {...inputProps}
                               readOnly={readOnly}
                        />
                        <span>{text}</span>
                        {InputProps?.endAdornment}
                    </div>
                )}
            />
            {hasError && <p className={'error-message'}>{hasError}</p>}
        </>

    );
}

export default CustomTimePicker;