import { storiesOf } from '@storybook/vue';
import itfApp from '../app/App.vue';
import itfIcon from '../icon/Icon.vue';
import itfButton from '../button/Button.vue';
import itfBoard from './Board.vue';
import itfBoardColumn from './BoardColumn.vue';
import itfBoardCard from './BoardCard.vue';
import itfBoardCardTimer from './BoardCardTimer.vue';

storiesOf('Common', module)
  .add('Kanban board', () => ({
    components: {
      itfIcon,
      itfBoard,
      itfBoardColumn,
      itfBoardCard,
      itfBoardCardTimer
    },
    data() {
      // document.body.setAttribute('data-theme', 'dark')
      return {
        columnOrders: [],
        columns: [
          { Id: 1, Name: '➡️ Todo' },
          { Id: 2, Name: '⚙️ In progress' },
          { Id: 3, Name: '✅ Done' },
        ],
        tasks: [
          { Id: 1, Name: 'Test', Status: { Id: 1 } },
          { Id: 2, Name: 'Test 2', Status: { Id: 1 } },
          { Id: 3, Name: 'Test 3', Status: { Id: 2 } },
          { Id: 4, Name: 'Test 4', Status: { Id: 3 } },
        ]
      }
    },
    methods: {
      onItemUpdate([item, status]) {
        console.info('onItemUpdate', item, status);
      }
    },
    template: `<div>
      <p></p>

      <h2>Usage</h2>

      <pre></pre>

      <h3>Example</h3>

      <div style="height: 90vh; display: flex; width: 100%">
        <itf-board class="flex-grow-1" :columns.sync="columns" :column-orders.sync="columnOrders" :items.sync="tasks" column-sorting @update:item="onItemUpdate">
          <template #column="{ column, items }">
            <itf-board-column :column="column" :items="items" card-sorting @update:columns="columns = $event">
              <template #empty>
                <div>
                  Your ad can be here
                </div>
              </template>
              <template #item="{ item }">
                <itf-board-card :text="item.Name">
                  <template #header>
<!--                    <itf-board-card-timer text="01:20:00"></itf-board-card-timer>-->
                  </template>
                  <template #footer>
                    <!--div class="d-flex p-2">
                      <div>
                        <itf-icon name="clock" />
                        1h 20m
                      </div>
                    </div-->
<!--                    <itf-board-card-timer text="01:20:00"></itf-board-card-timer>-->
                  </template>
                </itf-board-card>
              </template>
            </itf-board-column>
          </template>
        </itf-board>
      </div>
    </div>`,
  }))
