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

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

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

  //console.log(value)
  /***
   * @type {Date}
   */
  let realDate = (typeof(value) === "string" ? new Date(Date.parse( (value.length > 19 || value.length < 10) ? value : value + "Z")) : value);
  if(typeof(realDate) != "object")
    realDate = null;
  //check if its ivnalid, if so make it null
  if(isNaN(realDate))
    realDate = null;

  const {value: _x, onChange: _y, ...restProps} = props;
  // console.log(realDate)
  // console.log(realDate?.toISOString().slice(0,19))

  return <Input type="datetime-local" 
    value={realDate?.toISOString().slice(0,16)} 
    onChange={(e)=>{
      const value =  e.target.value;
      console.log( (value.length > 19 || value.length < 10) ? value : value + "Z")
      onChange(new Date( (value.length > 19 || value.length < 10) ? value : value + "Z"))
    }} {...field}  {...restProps} />;
}