import { storiesOf } from '@storybook/vue';
import itfApp from '../app/App.vue';
import itfButton from '../button/Button.vue';
import itfIcon from '../icon/Icon.vue';
import itfTreeView from './TreeView.vue';

storiesOf('Tree', module)
  .add('Tree View', () => ({
    components: {
      itfApp,
      itfIcon,
      itfTreeView,
      itfButton
    },
    data() {
      return {
        selected: null,
        items: [
          { Name: 'CEO', Id: null, Count: 69, Responsible: { FirstName: 'Anatolii', LastName: 'Maslov' } },
          { Name: 'Delivery', Id: 1, ParentId: null, Count: 50, Type: 'Dep', Responsible: { FirstName: 'Andrii', LastName: 'Olek' } },
          { Name: 'Marketing', Id: 2, ParentId: null, Count: 1, Type: 'Dep', Responsible: { FirstName: 'Emil', LastName: 'Tro' } },
          { Name: 'Sales', Id: 3, ParentId: null, Count: 4, Type: 'Dep', Responsible: { FirstName: 'Yurii', LastName: 'Ko' } },
          { Name: 'Salesman', Id: 4, ParentId: 3, Count: 2, Type: 'Team' },
          { Name: 'Searchers', Id: 5, ParentId: 3, Count: 2, Type: 'Team' },
          { Name: 'PMO', Id: 6, ParentId: 1, Count: 69, Type: 'Dep' },
        ]
      }
    },
    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>

      <h3>Example</h3>

      <itf-app>
        <div class="row">
          <div class="col-3">
            <itf-tree-view :items="items" v-model="selected">
              <template #item="{ item }">
                <h6 class="mb-0">
                  <span>
                  {{item.Name}}
                    </span>
                </h6>
                <p v-if="item.Responsible" class="mb-0 opacity-75">
                  <small>
                    {{item.Responsible.FirstName}}
                    {{item.Responsible.LastName}}
                  </small>
                </p>
              </template>
              <template #prepend="{ item }">
                <itf-icon v-if="!item.Id" name="globe" size="24" class="flex-shrink-0" />
                <itf-icon v-else-if="item.Type === 'Dep'" name="folder_closed" size="24" class="flex-shrink-0" />
                <itf-icon v-else-if="item.Type === 'Team'" name="users" size="24" class="flex-shrink-0" />
              </template>
              <template #append="{ item }">
                <small class="opacity-50 text-nowrap">
                  <itf-icon name="user_male" /> {{item.Count}}
                </small>
              </template>
            </itf-tree-view>
          </div>
          <div class="col-9">

            <h1 class="align-items-center d-flex">
              <itf-icon class="me-2" name="globe" size="36" />
              The Company
            </h1>

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