import { DatePicker } from '@theorchard/suite-components';
import cx from 'classnames';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import React, { useState } from 'react';
import OptionalTooltip from '../optionalTooltip';
import TimePicker from '../timePicker';
import type { FC } from 'react';

dayjs.extend(utc);

export interface DateTimePickerProps {
    className?: string;
    dateTime?: Date;
    onDateTimeChange: (dateTime: Date) => void;
    labelTimeFormat?: string;
    timeLabelFormatter?: (input: string) => string;
    enabled?: boolean;
    disabledMessage: string;
}

const DateTimePicker: FC<DateTimePickerProps> = ({
    className,
    dateTime,
    onDateTimeChange,
    labelTimeFormat,
    timeLabelFormatter,
    enabled = true,
    disabledMessage,
}) => {
    const [date, setDate] = useState<string | undefined>(
        dateTime ? dayjs.utc(dateTime).format('YYYY-MM-DD') : undefined
    );

    const [time, setTime] = useState<string>(
        dateTime ? dayjs.utc(dateTime).format('HH:mm:ss') : '00:00:00'
    );

    return (
        <div className={cx('DateTimePicker', className)}>
            <OptionalTooltip
                id="datepicker"
                className="DateTimePicker-datepicker"
                message={disabledMessage}
                enabled={!enabled}
            >
                <DatePicker
                    disabled={!enabled}
                    isClearable={false}
                    className="DateTimePicker-datepicker"
                    selectedValue={date}
                    onChange={newDate => {
                        if (!newDate) return;
                        setDate(newDate);
                        onDateTimeChange(
                            dayjs.utc(`${newDate}T${time}Z`).toDate()
                        );
                    }}
                />
            </OptionalTooltip>
            <OptionalTooltip
                id="timepicker"
                className="DateTimePicker-timepicker"
                message={disabledMessage}
                enabled={!enabled}
            >
                <TimePicker
                    enabled={enabled}
                    className="DateTimePicker-timepicker"
                    interval={60}
                    maxMenuHeight={200}
                    value={time}
                    labelTimeFormat={labelTimeFormat}
                    labelFormatter={timeLabelFormatter}
                    onChange={newTime => {
                        if (!newTime) return;
                        setTime(newTime);
                        onDateTimeChange(
                            dayjs.utc(`${date}T${newTime}Z`).toDate()
                        );
                    }}
                />
            </OptionalTooltip>
        </div>
    );
};

export default DateTimePicker;