import { Typography } from "@mui/material";
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
import React from "react";
import { Field } from "../../data/pfa-fields";
import { helperTextStyles } from "../styles/inputLabel";

export interface DatePickerInputProps {
  field: Field;
  visible: boolean;
  disabled: boolean;
  formValues: { [key: string]: string };
  handleChange: (id: string, value: string) => void;
}

export const DatePickerInput: React.FC<DatePickerInputProps> = (
  datePickerInputProps,
) => {
  const { field, formValues, handleChange, visible, disabled } =
    datePickerInputProps;

  return (
    <>
      {visible && (
        <div>
          <DateTimePicker
            label={field.label}
            value={formValues[field.id] ? new Date(formValues[field.id]) : null}
            onChange={(newVal: Date) =>
              handleChange(field.id, newVal.toISOString())
            }
            disabled={disabled}
          />
          <Typography variant="body2" sx={{ ...helperTextStyles }}>
            {field.description}
          </Typography>
        </div>
      )}{" "}
    </>
  );
};