/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import React from 'react';
import {ReactDatePickerProps} from 'react-datepicker';

import {Label} from 'components/label';

import {DatePickerContainer, DatePickerElement, HelperText} from './style';

interface IDatePicker extends Omit<ReactDatePickerProps, 'onChange'> {
  label?: string;
  labelColor?: string;
  labelIcon?: React.JSX.Element;
  labelHtmlFor?: string;
  labelClassName?: string;
  name: string;
  onDateChange: (name: string, date: Date) => void;
  error?: boolean;
  helperText?: string;
  helperTextClassName?: string;
  width?: number | string;
}

const DatePicker = ({
  label,
  labelColor,
  labelIcon,
  labelHtmlFor,
  labelClassName,
  name,
  onDateChange,
  error,
  helperText,
  helperTextClassName,
  width,
  ...rest
}: IDatePicker): React.JSX.Element => {
  const handleOnChange = (date: Date) => onDateChange(name, date);

  return (
    <DatePickerContainer width={width}>
      {!!label && <Label text={label} color={labelColor} icon={labelIcon} htmlFor={labelHtmlFor} className={labelClassName} />}
      <DatePickerElement name={name} onChange={handleOnChange} {...rest} />
      {!!helperText && (
        <HelperText className={helperTextClassName} error={error}>
          {helperText}
        </HelperText>
      )}
    </DatePickerContainer>
  );
};

export default DatePicker;
