import 'spectre-canjs/form-widget/form-widget';
import 'spectre-canjs/form-widget/field-components/text-field/';
import 'spectre-canjs/form-widget/field-components/select-field/';
import 'spectre-canjs/form-widget/field-components/file-field/';
import 'spectre-canjs/form-widget/field-components/json-field/';
import 'spectre-canjs/form-widget/field-components/date-field/';
import { mapToFields } from 'spectre-canjs/util/field';
import fixture from 'can-fixture';
import stache from 'can-stache';
import DefineMap from 'can-define/map/map';

//this example uses fixtures to catch requests and simulate
//file upload experience
fixture.delay = 2000;
fixture({
    method: 'POST',
    url: '/upload'
}, function(request, response, headers, ajaxSettings) {
    return {
        uploads: ['fake_upload_filename']
    };
});

fixture({
    method: 'DELETE',
    url: '/upload'
}, function() {
    return {
        result: 'Success'
    };
});

const Template = DefineMap.extend({
    field1: {
        value: 'test-value',
        name: 'field1',
        validate(props) {
            console.log(props);
            return props.value.length < 50 ? 'This field must contain at least 50 characters' : false;
        }
    },
    field2: {
        value: 'another value',
        name: 'field2',
        alias: 'A basic textarea field',
        type: 'text',
        textarea: true,
        placeholder: 'Enter the text: "hello"',
        validate(props) {
            if (props.value !== 'hello') {
                return 'This field must contain the text, "hello"';
            }
            return false;
        }
    },
    field3: {
        value: 1,
        name: 'field3',
        alias: 'A select dropdown',
        fieldType: 'select',
        options: [{
            value: 1,
            label: 'Option 1'
        }, {
            value: 2,
            label: 'Option 2'
        }]
    },
    field4: {
        name: 'field4',
        alias: 'A date field',
        fieldType: 'date',
        value: new Date('2010-10-11')
    },
    field5: {
        name: 'field5',
        alias: 'A file field',
        multiple: true,
        fieldType: 'file',
        url: '/upload'
    },
    field6: {
        name: 'field6',
        alias: 'A JSON Field',
        fieldType: 'json',
        type: 'string',
        value: '',
        ObjectTemplate: DefineMap.extend({
            json_field_1: 'string',
            json_field_2: {
                value: 2,
                fieldType: 'select',
                options: [{
                    value: 1,
                    label: 'Option 1'
                }, {
                    value: 2,
                    label: 'Option 2'
                }]
            },
            json_field_3: {
                type: 'number',
                validate(props) {
                    return props.value < 10 ? 'Please enter a value greater than 10' : undefined;
                }
            }
        })
    }
});

const render = stache.from('demo-html');

const vm = new DefineMap({
    onChange(){
      console.log(arguments);
    },
    onSubmit() {
        alert('Form submitted! See the console for details');
        console.log('submitted data: ', this.formObject.serialize())
    },
    onCancel(){
      console.log('Form canceled!');
    },
    formObject: new Template(),
    fields: mapToFields(Template),
    stringify() {
        return JSON.stringify(this.formObject.serialize());
    }
});

const frag = render(vm);

document.body.appendChild(frag);

@@ -372,64 +372,8 @@
 /';%0A
-import %7B mapToFields %7D from 'spectre-canjs/util/field';%0A
 impo
@@ -399,24 +399,24 @@
 n-fixture';%0A
+
 import stach
@@ -927,24 +927,32 @@
 ield1: %7B
-%0A       
+ type: 'string',
  value: 
@@ -959,25 +959,157 @@
 'test-value'
-,
+ %7D,%0A    field2: 'string',%0A    field3: 'number',%0A    field4: 'date',%0A    field5: 'string',%0A    field6: 'string'%0A%7D);%0A%0Aconst fields = %5B%7B
 %0A        nam
@@ -1302,24 +1302,16 @@
   %7D,%0A   
- field2:
  %7B%0A     
@@ -1689,28 +1689,16 @@
 %7D%0A    %7D,
-%0A    field3:
  %7B%0A     
@@ -1953,28 +1953,16 @@
 %5D%0A    %7D,
-%0A    field4:
  %7B%0A     
@@ -2082,28 +2082,16 @@
 )%0A    %7D,
-%0A    field5:
  %7B%0A     
@@ -2220,28 +2220,16 @@
 '%0A    %7D,
-%0A    field6:
  %7B%0A     
@@ -2451,24 +2451,193 @@
 _field_2: %7B%0A
+                validate(props)%7B%0A                  console.log(props);%0A                  return props.value != 2 ? 'The value must be 2' : undefined;%0A                %7D,%0A
             
@@ -3143,27 +3143,25 @@
    %7D)%0A    %7D%0A
-%7D);
+%5D
 %0A%0Aconst rend
@@ -3219,16 +3219,68 @@
 neMap(%7B%0A
+    formObject: new Template(),%0A    fields: fields,%0A
     onCh
@@ -3285,18 +3285,21 @@
 Change()
+ 
 %7B%0A
+  
       co
@@ -3496,18 +3496,21 @@
 Cancel()
+ 
 %7B%0A
+  
       co
@@ -3549,75 +3549,8 @@
  %7D,%0A
-    formObject: new Template(),%0A    fields: mapToFields(Template),%0A
     

update demo to use `fields` property example