import React, { useState } from 'react';

import { useTranslations } from '@shoptet/ui-core-web';

import { useScreenSize } from '../../../hooks/useScreenSize';
import { InputDialog } from '../../Fields/InputDialog/InputDialog';

import { Calendar } from './Calendar/Calendar';
import type { DateInputProps } from './DateInput/DateInput';
import { DateInput } from './DateInput/DateInput';
import { DateInputButton } from './DateInput/DateInputButton';
import type { DateInputContainerProps } from './DateInput/DateInputContainer';
import { DateInputContainer } from './DateInput/DateInputContainer';
import { DatePickerPopover } from './DatePickerPopover';
import { dictionary } from './dictionary';

/** @inheritdoc */
export interface DatePickerProps extends DateInputContainerProps, DateInputProps {
  ref?: React.Ref<HTMLInputElement>;
  label: string;
}

/**
 * A date picker input.
 * Includes translations. You can use `LocalizationProvider` to override language based on the user's locale.
 */
export const DatePicker = ({ label, error, loading, warning, width = 'sm', ref, ...inputProps }: DatePickerProps) => {
  const screenSize = useScreenSize();

  const translations = useTranslations(dictionary);

  const [isOpen, setIsOpen] = useState(false);

  const handleOpenChange = (open: boolean) => {
    // TODO: This is a workaround for events to be fired twice in Chromium browsers
    // Issue: https://issues.chromium.org/issues/40851596
    window.requestAnimationFrame(() => {
      setIsOpen(open);

      if (inputProps.onOpenChange) {
        inputProps.onOpenChange(open);
      }
    });
  };

  return (
    <DateInputContainer
      {...inputProps}
      isOpen={inputProps.isOpen ?? isOpen}
      onOpenChange={handleOpenChange}
      width={width}
      aria-label={label}
    >
      <DateInput ref={ref} error={error} loading={loading} warning={warning} />

      {screenSize === 'large' ? (
        <DateInputButton />
      ) : (
        <InputDialog
          presentation='prompt'
          label={label}
          closeButtonLabel={translations.close}
          trigger={<DateInputButton />}
          isOpen={isOpen}
          onOpenChange={handleOpenChange}
        >
          <InputDialog.Body>
            <InputDialog.BodyInner>
              <Calendar />
            </InputDialog.BodyInner>
          </InputDialog.Body>
        </InputDialog>
      )}

      {screenSize === 'large' && (
        <DatePickerPopover>
          <Calendar />
        </DatePickerPopover>
      )}
    </DateInputContainer>
  );
};