import * as React from 'react';
import { css } from '@patternfly/react-styles';
import datePickerStyles from '@patternfly/react-styles/css/components/DatePicker/date-picker';
import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
import { getUniqueId } from '../../helpers';
import { Popper } from '../../helpers/Popper/Popper';
import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
import { InputGroup, InputGroupItem } from '../InputGroup';
import { TextInput, TextInputProps } from '../TextInput';
import { KeyTypes } from '../../helpers/constants';
import {
  parseTime,
  validateTime,
  makeTimeOptions,
  amSuffix,
  pmSuffix,
  getHours,
  getMinutes,
  isWithinMinMax,
  getSeconds
} from './TimePickerUtils';
import { HelperText, HelperTextItem } from '../HelperText';
import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
import cssDatePickerFormControlWidth from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_Width';

export interface TimePickerProps
  extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
  /** Additional classes added to the time picker. */
  className?: string;
  /** Accessible label for the time picker */
  'aria-label'?: string;
  /** Flag indicating the time picker is disabled */
  isDisabled?: boolean;
  /** String to display in the empty time picker field as a hint for the expected time format */
  placeholder?: string;
  /** Character to display between the hour and minute */
  delimiter?: string;
  /** A time string. The format could be  an ISO 8601 formatted date string or in 'HH{delimiter}MM' format */
  time?: string | Date;
  /** Error message to display when the time is provided in an invalid format. */
  invalidFormatErrorMessage?: string;
  /** Error message to display when the time provided is not within the minTime/maxTime constriants */
  invalidMinMaxErrorMessage?: string;
  /** True if the time is 24 hour time. False if the time is 12 hour time */
  is24Hour?: boolean;
  /** Optional event handler called each time the value in the time picker input changes. */
  onChange?: (
    event: React.FormEvent<HTMLInputElement>,
    time: string,
    hour?: number,
    minute?: number,
    seconds?: number,
    isValid?: boolean
  ) => void;
  /** Optional validator can be provided to override the internal time validator. */
  validateTime?: (time: string) => boolean;
  /** Id of the time picker */
  id?: string;
  /** Width of the time picker. */
  width?: string;
  /** The container to append the menu to. Defaults to 'inline'.
   * If your menu is being cut off you can append it to an element higher up the DOM tree.
   * Some examples:
   * menuAppendTo="parent"
   * menuAppendTo={() => document.body}
   * menuAppendTo={document.getElementById('target')}
   */
  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
  /** Size of step between time options in minutes.*/
  stepMinutes?: number;
  /** Additional props for input field */
  inputProps?: TextInputProps;
  /** A time string indicating the minimum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format */
  minTime?: string | Date;
  /** A time string indicating the maximum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format */
  maxTime?: string | Date;
  /** Includes number of seconds with the chosen time and allows users to manually edit the seconds value. */
  includeSeconds?: boolean;
  /** Flag to control the opened state of the time picker menu */
  isOpen?: boolean;
  /** Handler invoked each time the open state of time picker updates */
  setIsOpen?: (isOpen?: boolean) => void;
  /** z-index of the time picker */
  zIndex?: number;
}

interface TimePickerState {
  isInvalid: boolean;
  isTimeOptionsOpen: boolean;
  timeState: string;
  focusedIndex: number;
  scrollIndex: number;
  timeRegex: RegExp;
  minTimeState: string;
  maxTimeState: string;
}

class TimePicker extends