import React from 'react';
import {
    Create,
    SimpleForm,
    TextInput,
    Toolbar,
    SaveButton,
    ReferenceInput,
    SelectInput,
    DateTimeInput,
    DateInput
 }
from 'react-admin';
import CancelButton from '../../layout/CancelButton.js'

const CustomToolbar = props => (
    <Toolbar {...props}>
        <SaveButton />
        <CancelButton />
    </Toolbar>
);

const dateFormatter = v => {
  // v is a `Date` object
  console.log(v);
  if (!(v instanceof Date) || isNaN(v)) return;
  const pad = '00';
  const yy = v.getFullYear().toString();
  const mm = (v.getMonth() + 1).toString();
  const dd = v.getDate().toString();
  console.log(match);
  console.log(dd);
  return `${yy}-${(pad + mm).slice(-2)}-${(pad + dd).slice(-2)}`;
};

const dateParser = v => {
  // v is a string of "YYYY-MM-DD" format
  console.log(v);

  const match = /(\d{4})-(\d{2})-(\d{2})/.exec(v);

  console.log(match);

  if (match === null) return;
  const d = new Date(`${match[3]}/${parseInt(match[2], 10) - 1}/${match[1]}`);
  console.log(d);
  if (isNaN(d)) return;
  return d;
};

export const CreateSurvey = props => (
    <Create {...props}>
        <SimpleForm redirect="list" toolbar={<CustomToolbar/>}>
          <ReferenceInput label="Organization" source="organization_id" reference="organization">
            <SelectInput optionText="organization_id" />
          </ReferenceInput>
           <TextInput source="name" />
           <TextInput source="description" />
           <TextInput source="instruction" />
           <DateInput source="begin_at" format={dateFormatter} parse={dateParser} />
           <DateInput source="finished_at" format={dateFormatter} parse={dateParser} />
           <TextInput source="latitude" />
           <TextInput source="longitude" />
        </SimpleForm>
    </Create>
);