import { type FC } from 'react';

import FormDatePicker from '@material-hu/components/design-system/Inputs/DatePicker/form';

import useRules from 'src/hooks/useRules';
import { type InputValidations } from 'src/pages/dashboard/serviceManagement/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

export const DATE_DAY_PATTERN = 'YYYY-MM-DD';
export const DATE_MONTH_PATTERN = 'YYYY-MM';

export type DateInputProps = {
  name: string;
  required?: boolean;
  formFilled?: boolean;
  validations?: InputValidations;
};

export const DateInput: FC<DateInputProps> = ({
  name,
  required,
  formFilled,
  validations,
}) => {
  const { t } = useLokaliseTranslation(['validations']);
  const hasDay = validations?.pattern?.includes('dd');
  const views = hasDay
    ? (['year', 'month', 'day'] as const)
    : (['month', 'year'] as const);

  const checkValidFormatDate = !validations?.pattern
    ? false
    : hasDay || t('validations:invalid_date_field_short');

  return (
    <FormDatePicker
      name={name}
      rules={useRules({
        requiredWithMessage: required ? t('validations:required') : false,
        checkValidFormatDate,
      })}
      inputProps={{
        disabled: formFilled,
        views,
        format: hasDay ? 'dd/MM/yyyy' : 'MM/yyyy',
        fullWidth: true,
      }}
    />
  );
};

export default DateInput;