"use client";

import { Calendar, DateField, DatePicker, Label, TimeField, type TimeValue } from "@heroui/react";
import { parseDateTime, type CalendarDateTime } from "@internationalized/date";

type Props = {
  label: string;
  value: string;
  onChange: (value: string) => void;
  required?: boolean;
};
export default function AulaDateTimeField({ label, value, onChange, required }: Props) {
  let date: CalendarDateTime | null = null;
  try {
    if (value) date = parseDateTime(value.slice(0, 19));
  } catch {
    /* Invalid stored dates can be corrected in the field. */
  }
  return (
    <DatePicker<CalendarDateTime>
      aria-label={label}
      value={date}
      onChange={(next) => onChange(next?.toString().slice(0, 16) ?? "")}
      granularity="minute"
      hourCycle={24}
      shouldForceLeadingZeros
      isRequired={required}
      className="min-w-0 w-full"
    >
      {({ state }) => (
        <>
          <Label>{label}</Label>
          <DateField.Group fullWidth variant="secondary">
            <DateField.Input>
              {(segment) => <DateField.Segment segment={segment} />}
            </DateField.Input>
            <DateField.Suffix>
              <DatePicker.Trigger aria-label={`Abrir calendario: ${label}`}>
                <DatePicker.TriggerIndicator />
              </DatePicker.Trigger>
            </DateField.Suffix>
          </DateField.Group>
          <DatePicker.Popover className="flex max-w-[calc(100vw-2rem)] flex-col gap-3">
            <Calendar aria-label={`Calendario: ${label}`}>
              <Calendar.Header>
                <Calendar.YearPickerTrigger>
                  <Calendar.YearPickerTriggerHeading />
                  <Calendar.YearPickerTriggerIndicator />
                </Calendar.YearPickerTrigger>
                <Calendar.NavButton slot="previous" />
                <Calendar.NavButton slot="next" />
              </Calendar.Header>
              <Calendar.Grid>
                <Calendar.GridHeader>
                  {(day) => <Calendar.HeaderCell>{day}</Calendar.HeaderCell>}
                </Calendar.GridHeader>
                <Calendar.GridBody>{(day) => <Calendar.Cell date={day} />}</Calendar.GridBody>
              </Calendar.Grid>
              <Calendar.YearPickerGrid>
                <Calendar.YearPickerGridBody>
                  {({ year }) => <Calendar.YearPickerCell year={year} />}
                </Calendar.YearPickerGridBody>
              </Calendar.YearPickerGrid>
            </Calendar>
            <TimeField
              aria-label={`Hora: ${label}`}
              granularity="minute"
              hourCycle={24}
              shouldForceLeadingZeros
              value={state.timeValue}
              onChange={(next) => {
                if (next) state.setTimeValue(next as TimeValue);
              }}
            >
              <Label>Hora</Label>
              <TimeField.Group variant="secondary">
                <TimeField.Input>
                  {(segment) => <TimeField.Segment segment={segment} />}
                </TimeField.Input>
              </TimeField.Group>
            </TimeField>
          </DatePicker.Popover>
        </>
      )}
    </DatePicker>
  );
}