import React from "react";

import { ValidatedInput } from "../validated_input";
import { SelectButton } from "../buttons/select_button";

import { useTimeOfBirth } from "./time_of_birth.hook";
import { useStyles } from "./styles";

export const PM_TIME = 'PM';
export const AM_TIME = 'AM';

export type TimeOfBirthType = {
    onTimeChanged: (time: number | null) => {},
    dateOfBirth?: number,
    inputClass?: string,
    buttonClass?: string,
    hoursIptProps?: object,
    minutesIptProps?: object,
    amBtnProps?: object,
    pmBtnProps?: object,
    errorMessage?: {
        hours: string,
        minutes: string
    }
}

export const TimeOfBirth = ({
    inputClass, buttonClass,
    hoursIptProps, minutesIptProps,
    amBtnProps, pmBtnProps, errorMessage, ...props
}: TimeOfBirthType) => {
    const { wrapper, buttonRoot, inputFirst } = useStyles();
    const {
        handleChangeHours,
        handleChangeMinutes,
        choosePmTime,
        chooseAmTime,
        handleMinuteError,
        handleHoursError,
        hours,
        minutes,
        time
    } = useTimeOfBirth(props);

    const buttonRootClass = `${buttonRoot} ${buttonClass || ''}`

    return (
        <div className={wrapper}>
            <ValidatedInput
                label="HH"
                rootClassName={`${inputFirst} ${inputClass || ''}`}
                maxLength={2}
                onError={handleHoursError}
                validationQuery={{
                    type: {
                        value: "number",
                        moreThen: {
                            value: 0,
                            errorMessage: errorMessage?.hours || 'Incorrect time'
                        },
                        lessThen: {
                            value: 13,
                            errorMessage: errorMessage?.hours || 'Incorrect time'
                        },
                    }
                }}
                onChange={handleChangeHours} value={hours}
                {...hoursIptProps}
            />
            <ValidatedInput
                label="MM"
                onError={handleMinuteError}
                rootClassName={inputClass || ''}
                maxLength={2}
                validationQuery={{
                    type: {
                        value: "number",
                        moreThen: {
                            value: -1,
                            errorMessage: errorMessage?.minutes || 'Incorrect time'
                        },
                        lessThen: {
                            value: 60,
                            errorMessage: errorMessage?.minutes || 'Incorrect time'
                        },
                    }
                }}
                onChange={handleChangeMinutes}
                value={minutes}
                {...minutesIptProps}
            />
            <SelectButton
                selected={time === AM_TIME}
                onClick={chooseAmTime}
                className={buttonRootClass}
                label={AM_TIME}
                {...amBtnProps}
            />
            <SelectButton
                selected={time === PM_TIME}
                onClick={choosePmTime}
                className={buttonRootClass}
                label={PM_TIME}
                {...pmBtnProps}
            />
        </div>

    );
}
