import tw, { styled } from "twin.macro";
import "styled-components/macro";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { DateTimePicker } from '@mantine/dates';
import '@mantine/dates/styles.css';

dayjs.extend(utc);

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

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

  const parsedDate = dayjs.utc(value);
  const isValid = value && parsedDate.isValid();
  const displayDate = isValid ? dayjs(parsedDate.format("YYYY-MM-DDTHH:mm:ss")).toDate() : null;

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

  return <DateTimePicker 
    value={displayDate} 
    onChange={(val)=>{
      const outDate = val ? dayjs.utc(dayjs(val).format("YYYY-MM-DDTHH:mm:ss")).toDate() : null;
      onChange({ target: { value: outDate, name: field.name } });
    }} 
    {...field}  
    {...restProps} 
  />;
}