import { storiesOf } from '@storybook/vue';
import ITFSettings from '../../ITFSettings';
import itfApp from '../app/App.vue';
import itfButton from '../button/Button.vue';
import itfTable from './Table2.vue';
import itfSelect from '../select/Select.vue';

const exampleData = [{
  Employee: 'Cool',
  Total: 100,
  FTE: 1.0,
  Position: 'Developer',
  MinutesInternal: '10h 20m',
  MinutesExternal: '10h 20m',
  AmountInternal: 1000,
  AmountExternal: 2000,
  AmountShare: 200,
  Notes: 'Test'
},{
  Employee: 'Cool',
  Total: 100,
  FTE: 1.0,
  Position: 'Developer',
  MinutesInternal: '10h 20m',
  MinutesExternal: '10h 20m',
  AmountInternal: 1000,
  AmountExternal: 2000,
  AmountShare: 200,
  Notes: 'Test'
},{
  Employee: 'Cool',
  Total: 100,
  FTE: 1.0,
  Position: 'Developer',
  MinutesInternal: '10h 20m',
  MinutesExternal: '10h 20m',
  AmountInternal: 1000,
  AmountExternal: 2000,
  AmountShare: 200,
  Notes: 'Test'
},{
  Employee: 'Cool',
  Total: 100,
  FTE: 1.0,
  Position: 'Developer',
  MinutesInternal: '10h 20m',
  MinutesExternal: '10h 20m',
  AmountInternal: 1000,
  AmountExternal: 2000,
  AmountShare: 200,
  Notes: 'Test'
},{
  Employee: 'Cool',
  Total: 100,
  FTE: 1.0,
  Position: 'Developer',
  MinutesInternal: '10h 20m',
  MinutesExternal: '10h 20m',
  AmountInternal: 1000,
  AmountExternal: 2000,
  AmountShare: 200,
  Notes: 'Test'
},{
  Employee: 'Cool',
  Total: 100,
  FTE: 1.0,
  Position: 'Developer',
  MinutesInternal: '10h 20m',
  MinutesExternal: '10h 20m',
  AmountInternal: 1000,
  AmountExternal: 2000,
  AmountShare: 200,
  Notes: 'Test'
}];

ITFSettings.currencies = [
  { Id: '1', Code: 'USD', Title: 'USD', IsDefault: true, Symbol: '$' }
];

storiesOf('Common', module)
  .add('Table', () => ({
    components: {
      itfButton,
      itfTable,
      itfSelect
    },
    data() {
      return {
        selectedIds: [],
        sorting: 'Description',
        list: Array.from({length: 20}).map((_, i) => ({
          Id: i,
          text: `Рахунок ✅`,
          Name: `Item #${i}`
        })).concat(Array.from({length: 20}).map((_, i) => ({
          Id: i,
          text: `Рахунок ❌`,
          Name: `Item #${i}`
        }))),
        columns2: [
          {
            text: 'Рахунок',
            name: 'Account',
            width: 200,
            min: 250,
            max: 250
          },
          {
            text: 'Рахунок',
            name: 'Account',
            width: 200,
            min: 250,
            max: 250
          }
        ],
        list2: [
          {
            Id: 1,
            summary: true,
            Description: 'Total asd asd dad ad ada dadad a',
            EmployeeId: 1,
            Total: 100,
            FTE: 1.0,
            Position: { Title: 'Developer', Id: 1 },
            MinutesInternal: '10h 20m',
            MinutesExternal: '10h 20m',
            AmountInternal: 1000,
            AmountExternal: 2000,
            AmountShare: 200,
            Notes: 'Test',
            Rate: '10',
            Time: '10h 00m',
            Amount: 2000
          }
        ],
        schema: {
          "properties": [
            {
              "property": "Description",
              "title": { "en_US": "Description", "uk_UA": "Прізвище" },
              "type": "text",
              "editable": true,
              "sortable": true,
              "filtrable": true,
              icon: 'money',
              width: 200,
              minWidth: 100,
              maxWidth: 300
            },
            {
              "property": "EmployeeId",
              "title": { "en_US": "Employee full name", "uk_UA": "Імʼя" },
              prefix: 'USD',
              "type": "employee",
              "copy": true,
              "editable": true,
              "sortable": false,
              icon: 'card',
              width: 200,
              minWidth: 100,
              maxWidth: 300
            },
            {
              "property": "Rate",
              "title": { "en_US": "Rate", "uk_UA": "Прізвище" },
              "type": "money",
              "editable": true,
              "sortable": false,
              icon: 'calendar',
              width: 200,
              minWidth: 100,
              maxWidth: 300
            },
            {
              "property": "Time",
              "title": { "en_US": "Time", "uk_UA": "Прізвище" },
              "type": "time",
              "editable": true,
              "sortable": false,
              icon: 'person',
              width: 200,
              minWidth: 100,
              maxWidth: 300
            },
            {
              "property": "Amount",
              "title": { "en_US": "Amount", "uk_UA": "Прізвище" },
              "type": "money",
              icon: 'text',
              "sortable": false,
              width: 200,
              minWidth: 100,
              maxWidth: 300
            }
          ]
        },
        columns: [{
          text: 'Рахунок',
          name: 'Account',
          width: 200,
          min: 250,
          max: 250,
          sortable: true,
          groupable: true,
          pinned: true
        }, {
          text: 'Dr',
          name: 'Total',
          Type: 'select',
          Options: [
            { Id: 1, Name: '10.10.12.31 - test фів фівіф в вфів фвф' }
          ],
          width: 200,
          min: 150,
          max: 150,
          pinned: true
        }, {
          text: 'Cr 1',
          name: 'Total',
          Type: 'select',
          Options: [
            { Id: 1, Name: 'test' }
          ],
          width: 200,
          min: 150,
          max: 150
        }, {
          text: 'Cr 2',
          name: 'Total',
          Type: 'select',
          Options: [
            { Id: 1, Name: 'test' }
          ],
          width: 200,
          min: 150,
          max: 150
        }, {
          text: 'Cr 3',
          name: 'Total',
          Type: 'select',
          Options: [
            { Id: 1, Name: 'test' }
          ],
          width: 200,
          min: 150,
          max: 150
        }, {
          text: 'Cr 4',
          name: 'Total',
          Type: 'select',
          Options: [
            { Id: 1, Name: 'test' }
          ],
          width: 200,
          min: 150,
          max: 150
        }, {
          text: 'Cr',
          name: 'Total',
          Type: 'select',
          Options: [
            { Id: 1, Name: 'test' }
          ],
          width: 200,
          min: 150,
          max: 150
        }, {
          text: 'Cr',
          name: 'Total',
          Type: 'select',
          Options: [
            { Id: 1, Name: 'test' }
          ],
          width: 200,
          min: 150,
          max: 150
        }, {
          text: 'Cr',
          name: 'Total',
          Type: 'select',
          Options: [
            { Id: 1, Name: 'test' }
          ],
          width: 200,
          min: 150,
          max: 150
        }]
      }
    },
    methods: {
      onAdd(title) {
        this.list2.push({ Id: Math.random() });
      }
    },
    template: `<div>
      <p>You need wrap whole application with this tag</p>

      <h2>Usage</h2>

<pre>
  &lt;itf-table
    :columns="columns"
    :rows="list"
  >
    &lt;template #column.Employee="&#123; item }">&lt;/template>
  &lt;/itf-table>
</pre>

      schema.json
      <pre>
        {
          "properties": [
            {
              "property": "FirstName",
              "title": { "en": "FirstName", "uk": "Імʼя" },
              "type": "text",
              "sortable": true
            },
            {
              "property": "LastName",
              "title": { "en": "LastName", "uk": "Прізвище" },
              "type": "text",
              "sortable": true
            },
            {
              "property": "PositionId",
              "title": { "en": "Position", "uk": "Прізвище" },
              "type": "position",
              "sortable": true
            }
          ]
        }
      </pre>
      <h3>Example</h3>

      <itf-table
        add-new-rows
        striped
        @new="onAdd"
        state-name="test"
        :schema="schema"
        :columns.sync="columns2" :rows="list2"
        v-model="selectedIds"
        show-summary
        id-property="Id"
        :sorting.sync="sorting"
        column-sorting column-resizing show-add-column show-grouping @add-column="onAdd">
        <template #format.employee="{ item }">
          {{item.EmployeeId}}
        </template>
        <template #edit.employee="{ item }">
          <itf-select
            class="w-100"
            v-model="item.EmployeeId"
            :reduce="item => item.Id"
            :get-option-label="item => item.Name"
            :options="[{ Id: 1, Name: 'Vitalii Savchuk' }]" />
        </template>
      </itf-table>

      <itf-table
        editable
        add-new-rows
        @new="onAdd"
        state-name="test"
        :schema="schema"
        v-model="selectedIds"
        :columns.sync="columns2" :rows="list2"
        show-summary
        column-sorting column-resizing show-add-column show-grouping @add-column="onAdd">
        <template #format.employee="{ item }">
          {{item.EmployeeId}}
        </template>
        <template #edit.employee="{ item }">
          <itf-select
            class="w-100"
            v-model="item.EmployeeId"
            :reduce="item => item.Id"
            :get-option-label="item => item.Name"
            :options="[{ Id: 1, Name: 'Vitalii Savchuk' }]" />
        </template>
      </itf-table>

      <br />
      <br />
      <br />
      <!--itf-table2
        add-new-rows
        group-by="text"
        :columns.sync="columns" :rows="list" column-sorting column-resizing show-add-column show-grouping @add-column="onAdd">
        <template #column.Account="{ item }">
          {{item.text}}
        </template>
        <template #column.FTE="{ item }">
          {{item}}
        </template>
      </itf-table2-->

      <!--itf-table
        :columns="columns"
        :rows="list"
      >
        <template #column.Employee="{ item }">
          {{item.Employee}}
        </template>
      </itf-table-->

    </div>`,
  }))
