import React, { FC, useState, useEffect, useCallback } from "react";
import moment from "moment";
import cx from 'classnames';
import { Select } from '../../../Select';

import './style.scss'

export interface TimePickerSelectsProps {
    date: moment.Moment | null,
    onChange: (time: moment.Moment) => void,
}


const TimePickerSelectsModal: FC<TimePickerSelectsProps> = ({
    date, 
    onChange,
}) => {
    const [hourValue, setHourValue] = useState<number>(parseInt(moment(date).format("HH")))
    const [minuteValue, setMinuteValue] = useState<number>(parseInt(moment(date).format("mm")))
    const [AmPm, setAmPm] = useState<string>(moment(date).format("A"))

    const getOptions = (qtty = 0, includeCero = false) => {
        let items = []
        for (let i = includeCero ? 0 : 1; i <= qtty; i++) {
            items.push({ id: i, label: i.toLocaleString('en-US', {
                minimumIntegerDigits: 2,
                useGrouping: false
              }) })
        }
        return items
    }

    const getTimeObject = (time: string, value: moment.Moment | null) => {
        if (date != null) {
            if (time == "hour") {
                let hour = value!.hour()
                if (hour > 12)
                    hour = hour - 12
                if (hour == 0)
                    hour = 12
    
                return { id: hour, label: hour.toLocaleString('en-US', {
                    minimumIntegerDigits: 2,
                    useGrouping: false
                  })}
            }
    
            if (time == "minute") {
                let minute = value!.minute()
                return { id: minute, label: minute.toLocaleString('en-US', {
                    minimumIntegerDigits: 2,
                    useGrouping: false
                  }) }
            }
        } else {
            if (time == "hour") {
                return { id: 12, label: "12" }
            }
    
            if (time == "minute") {
                return { id: 0, label: "00" }
            }
        }
    }

    useEffect(() => {
        if (date) {
            setHourValue(parseInt(date.format("HH")))
            setMinuteValue(parseInt(date.format("mm")))
            setAmPm(date.format("A"))
        }
    }, [date]) 

    return (
        <div className={cx("gtc-rc-timePicker-range-modal-selects-wrap")} data-testid="gtc-rc-timePicker">
            <Select
                className="timePicker-selects-time"
                name="hours"
                value={getTimeObject("hour", date)}
                onChange={(value) => {
                    let isPm = AmPm === "PM"
                    let hour = value.id
                    
                    if (isPm && hour < 12)
                        hour = hour + 12
                    else if (!isPm && hour == 12){
                        hour = 0
                    }
                    setHourValue(hour)
                    const newMoment = moment().set({
                        'hour': hour, 
                        'minute': minuteValue,
                    })
                    onChange(newMoment)
                }}
                options={getOptions(12)}
                textField={'label'}
                valueField={'id'} 
                onSelectAll={() => {}}
                hasDropdownIcon={false}
            />

            <div className="timePicker-selects-label">
                :
            </div>
            <Select
                className="timePicker-selects-time"
                name="hours"
                value={getTimeObject("minute", date)}
                onChange={(value) => {
                    const minute = value.id
                    setMinuteValue(minute)
                    const newMoment = moment().set({
                        'hour': hourValue, 
                        'minute': minute,
                    })
                    onChange(newMoment)
                }}
                options={getOptions(59, true)}
                textField={'label'}
                valueField={'id'}
                onSelectAll={() => {}}
                hasDropdownIcon={false}
            />
            <Select
                className="timePicker-selects-AmPmSelect"
                name="hours"
                value={AmPm == "PM" ? { id: "PM", label: "PM" } : { id: "AM", label: "AM" }}
                onChange={(value) => {
                    let hour = hourValue
                    if (value.id == "AM" && hour > 12)
                        hour = hour - 12
                    else if (value.id == "PM" && hour < 12)
                        hour = hour + 12
                    else if (value.id == "AM" && hour == 12)
                        hour = 0

                    setAmPm(value.id)
                    const newMoment = moment().set({
                        'hour': hour, 
                        'minute': minuteValue,
                    })
                    onChange(newMoment)
                }}
                options={[{ id: "AM", label: "AM" }, { id: "PM", label: "PM" }]}
                textField={'label'}
                valueField={'id'}
                onSelectAll={() => {}}
                hasDropdownIcon={false}
            />
        </div>
    )
}

export default TimePickerSelectsModal