import { storiesOf } from '@storybook/vue';
import itfApp from '../app/App.vue';
import itfView from './View.vue';
import itfIcon from '../icon/Icon.vue';

storiesOf('Common', module)
  .add('View', () => ({
    components: {
      itfApp,
      itfIcon,
      itfView
    },
    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
          }
        ],
        page: 1,
        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
          },
          {
            Id: 2,
            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
          },
          {
            Id: 2,
            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
          },
          {
            Id: 2,
            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
          },
          {
            Id: 2,
            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
          },
          {
            Id: 2,
            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
          },
          {
            Id: 2,
            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
          },
          {
            Id: 2,
            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
          },
          {
            Id: 2,
            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
          },
          {
            Id: 2,
            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
          },
          {
            Id: 2,
            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
          },
          {
            Id: 2,
            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
          },
          {
            Id: 2,
            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
          },
          {
            Id: 2,
            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
            }
          ]
        },
        filters: [
          {
            "name": "period",
            "type": "period",
            icon: 'calendar',
            "options": {
              "defaultValue": {
                "label": "Весь час",
                "value": null
              }
            }
          },
          {
            "name": "amount",
            "type": "amount",
            icon: 'money',
            "options": {
              "min": 0.05,
              "max": 116907,
              "histogram": [
                164,
                10,
                4,
                4,
                2,
                3,
                1,
                4,
                1,
                0,
                1,
                1,
                0,
                0,
                0,
                2,
                1,
                0,
                0,
                0,
                1,
                1
              ],
              "defaultValue": {
                "value": [
                  0.05,
                  116907
                ],
                "label": "Будь-яка сума"
              }
            }
          },
          {
            "name": "type",
            "type": "list",
            icon: 'arrows',
            "options": {
              "items": [
                {
                  "value": "income",
                  "label": "Тільки доходи",
                  "text": "Дохідні"
                },
                {
                  "value": "outcome",
                  "label": "Тільки витрати",
                  "text": "Витратні"
                },
                {
                  "value": "transfer",
                  "label": "Перекази",
                  "text": "Перекази"
                },
                {
                  "value": "all",
                  "label": "Всі операції",
                  "text": "Всі"
                }
              ],
              "defaultValue": {
                "value": "all",
                "label": "Всі операції",
                "text": "Всі"
              }
            }
          },
          {
            "name": "accountId",
            "type": "facets-list",
            "options": {
              "multiple": true,
              "title": "Рахунки",
              "items": [
                {
                  "value": "wk571",
                  "label": "Cash test",
                  "count": "8"
                },
                {
                  "value": "wrDM1",
                  "label": "Ceska",
                  "count": "31"
                },
                {
                  "value": "e8bEZ",
                  "label": "test Account",
                  "count": "1"
                },
                {
                  "value": "eYvmw",
                  "label": "Test2",
                  "count": "1"
                },
                {
                  "value": "wD54Z",
                  "label": "Wise",
                  "count": "108"
                },
                {
                  "value": "ezJXe",
                  "label": "Ukrsib UAH",
                  "count": "13"
                },
                {
                  "value": "eqxL1",
                  "label": "Raiffeisen",
                  "count": "10"
                },
                {
                  "value": "12gbe",
                  "label": "Virtual wallet for refill",
                  "count": "3"
                },
                {
                  "value": "wOPxZ",
                  "label": "Upwork",
                  "count": "21"
                },
                {
                  "value": "wj58e",
                  "label": "Польський банк",
                  "count": "3"
                },
                {
                  "value": "e47n1",
                  "label": "czech account test",
                  "count": "1"
                }
              ],
              "total": 200,
              "defaultValue": {
                "label": "Усі рахунки",
                "value": []
              }
            }
          },
          {
            "name": "businessUnitId",
            "type": "facets-list",
            "options": {
              "multiple": true,
              "title": "Бізнес юніти",
              "items": [
                {
                  "value": "null",
                  "label": "No business unit",
                  "count": "39"
                },
                {
                  "value": "18edR",
                  "label": "BU Main",
                  "count": "161"
                }
              ],
              "total": 200,
              "defaultValue": {
                "label": "Усі бізнес юніти",
                "value": []
              }
            }
          }
        ]
      }
    },
    methods: {
      onAdd(title) {
        this.list2.push({ Id: Math.random() });
      }
    },
    template: `<div>

      <h3>Example</h3>

      <itf-app>
      <itf-view
        style="height: 500px;"
        add-new-rows
        striped
        @new="onAdd"
        state-name="test"
        :page.sync="page"
        :schema="schema"
        :filters="filters"
        :items="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 #pagination-center>
          <div class="text-muted small d-flex align-items-center">
            <itf-icon name="arrow-up" new />
            123
          </div>
        </template>
        <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-view>
      </itf-app>

    </div>`,
  }))
