import tw, { styled } from "twin.macro";
import "styled-components/macro";
import dayjs from "dayjs";

import Input, { useField } from "@shared/nej-react-components/Parts/Input";

export default function DateTimeField(props) {
  
  const [{onChange, value, ...field}, meta, helpers] = useField(props);

  const parsedDate = dayjs(value);
  const isValid = value && parsedDate.isValid();

  const {value: _x, onChange: _y, ...restProps} = props;

  return <Input type="datetime-local" 
    value={isValid ? parsedDate.format("YYYY-MM-DDTHH:mm") : ""} 
    onChange={(e)=>{
      const val = e.target.value;
      onChange({ target: { value: val ? dayjs(val).toDate() : null, name: field.name } });
    }} {...field}  {...restProps} />;
}