import { useContext } from 'react';
import { useRecoilValue } from 'recoil';

import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
import { parseDate } from '~/utils/date-utils';

import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldDateMetadata } from '../types/FieldMetadata';

export function GenericEditableDateFieldDisplayMode() {
  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
  const currentEditableFieldDefinition = useContext(
    EditableFieldDefinitionContext,
  ) as FieldDefinition<FieldDateMetadata>;

  const fieldValue = useRecoilValue<string>(
    genericEntityFieldFamilySelector({
      entityId: currentEditableFieldEntityId ?? '',
      fieldName: currentEditableFieldDefinition
        ? currentEditableFieldDefinition.metadata.fieldName
        : '',
    }),
  );

  const internalDateValue = fieldValue
    ? parseDate(fieldValue).toJSDate()
    : null;

  return <DateInputDisplay value={internalDateValue} />;
}