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

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

export default function DateField(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 <DatePickerInput 
    value={isValid ? parsedDate.toDate() : null} 
    onChange={(val)=>onChange({ target: { value: val, name: field.name } })} 
    {...field}  
    {...restProps} 
  />;
}