import React, { forwardRef, useRef } from 'react';

import { Field as CoreField } from '@shoptet/ui-core-web';
import type { SafeOmit, SafePick } from '@shoptet/utils';

import { Field } from '../../Field/Field';
import type { FieldProps } from '../../Field/Field';
import type { FieldHelperTextProps } from '../../Field/FieldHelperText';
import type { FieldLabelProps } from '../../Field/FieldLabel';
import type { DatePickerProps } from '../../Inputs/DatePicker/DatePicker';
import { DatePicker } from '../../Inputs/DatePicker/DatePicker';

/** @inheritdoc */
export interface DateFieldProps
  extends
    SafePick<FieldProps, 'tooltip' | 'required' | 'disabled' | 'readOnly'>,
    SafePick<FieldLabelProps, 'justify'>,
    SafeOmit<DatePickerProps, 'error' | 'warning' | 'label' | 'ref'>,
    SafePick<FieldHelperTextProps, 'error' | 'warning' | 'hint'> {
  /**
   * Label for the input element.
   */
  label: string;
  /**
   * Visually hide the label.
   */
  labelHidden?: FieldLabelProps['visuallyHidden'];
}

/**
 * Date field component.
 * Includes translations. You can use `LocalizationProvider` to override language based on the user's locale.
 */
export const DateField = forwardRef<HTMLInputElement, DateFieldProps>(function DateField(
  { tooltip, required, disabled, readOnly, label, labelHidden, justify, error, warning, hint, ...inputProps },
  ref
) {
  const inputContainerRef = useRef<HTMLDivElement>(null);

  // The date input is a `role="group"` of segments — not a labelable element — so the label's `htmlFor`
  // can't focus it natively. Mirror react-aria's own label behavior: focus the first segment on click.
  const handleLabelClick = () => {
    if (!disabled) {
      inputContainerRef.current?.querySelector<HTMLElement>('[role="spinbutton"]')?.focus();
    }
  };

  return (
    <Field tooltip={tooltip} invalid={!!error} required={required} disabled={disabled} readOnly={readOnly}>
      <Field.Label justify={justify} visuallyHidden={labelHidden} onClick={handleLabelClick}>
        {label}
      </Field.Label>
      <CoreField.Input>
        {({ state, props }) => (
          <div className='v2FormField__input' ref={inputContainerRef}>
            <DatePicker
              {...inputProps}
              {...props}
              ref={ref}
              required={state.required}
              disabled={state.disabled}
              readOnly={state.readOnly}
              error={!!error}
              warning={!!warning}
              label={label}
            />
            <Field.HelperText error={error} warning={warning} hint={hint} />
          </div>
        )}
      </CoreField.Input>
    </Field>
  );
});