import { storiesOf } from '@storybook/vue';
import itfPropertyItem from './PropertyItem.vue';
import itfPropertiesList from './PropertiesList.vue';
import itfPropertiesEditMenu from './PropertiesEditMenu.vue';
import itfForm from '../form/Form.vue';
import itfButton from '../button/Button.vue';
import itfIcon from '../icon/Icon.vue';
import itfLabel from '../form/Label.vue';
import itfApp from '../app/App.vue';

storiesOf('Common', module)
  .add('Customize', () => ({
    components: {
      itfApp,
      itfIcon,
      itfForm,
      itfButton,
      itfLabel,
      itfPropertiesList,
      itfPropertiesEditMenu,
      itfPropertyItem
    },
    data() {
      return {
        icon: 'shuffle',
        isVisible: false,
        from: '2021-01-16',
        to: null,
        dates: [],
        customDays: {
          '2021-10-21': { text: '🎉', class: 'test' }
        },
        list: [
          { Id: 'test1', Name: 'Last perfomance appraisal date', Icon: 'eye', Type: 'text' },
          { Id: 'test2', Name: 'Test2', Icon: 'eye', Type: 'date' },
        ],
        value: {
          test1: 'test1'
        },
        field: {
          Type: 'text',
          Name: 'Test'
        },
        fieldValue: 'text'
      }
    },
    methods: {
      submit() {
        this.$refs.form.doValidation();
      },
      reset() {
        this.$refs.form.resetValidation();
      }
    },
    template: `<div>
      <p>You need wrap whole application with this tag</p>

      <h2>Usage</h2>

  <pre>

  </pre>

      <h2>Example</h2>

      <itf-app ref="app">

        {{value}}

        <itf-properties-list editable :fields.sync="list" v-model="value"></itf-properties-list>

        <itf-properties-list lock-fields editable :fields.sync="list" v-model="value"></itf-properties-list>

        {{field}}
        <itf-property-item
          editable
          :field.sync="field"
          :value="fieldValue"
        />

        <itf-properties-edit-menu
          v-model="field"
        />

      </itf-app>
    </div>`,
  }));
