import { storiesOf } from '@storybook/vue';
import itfMoneyField from './MoneyField.vue';
import itfHoursField from './HoursField.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('Fields', () => ({
    components: {
      itfApp,
      itfIcon,
      itfForm,
      itfButton,
      itfLabel,
      itfMoneyField,
      itfHoursField
    },
    data() {
      return {
        value: 100,
        currencies: [
          { Id: 1, Symbol: '$', Code: 'USD', Title: 'Dollar' },
          { Id: 2, Symbol: 'ER', Code: 'EUR', Title: 'Euroooo' },
          { Id: 4, Symbol: 'ERO', Code: 'EUR', Title: 'Euroooo' },
          { Id: 3, Symbol: ".د.ب", Code: 'AED', Title: 'Emirati Dirham' },
        ],
        hoursStr: '10h 10m',
        hours: 0,
        currency: null
      }
    },
    methods: {
    },
    template: `<div>
      <p>You need wrap whole application with this tag</p>

      <h2>Usage</h2>

  <pre>

  </pre>

      <h2>Example</h2>

      <itf-app ref="app">

        {{hours}}

        <itf-money-field v-model="value" :currencies="currencies" :currency.sync="currency" />

        <itf-hours-field v-model="hoursStr" :hours.sync="hours" />

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