<template>
  <div class="demo-page">
    <div class="demo-block">
      <h1>Tabs</h1>
      <h2>Large (default)</h2>
      <p>
        Example of changing tabs outside of the component:
        <TfButton
          size="text"
          type="primary"
          @click="activeNameBigTabs = 'third'"
          v-text="'Go to role tab'"
        />
      </p>
      <TfTabs
        v-model="activeNameBigTabs"
        @tab-click="handleClick"
      >
        <ElTabPane
          label="Stuff"
          name="stuff"
        >
          Stuff
        </ElTabPane>

        <ElTabPane
          label="Inactive Tab"
          name="second"
        >
          <span slot="label">
            Project Setup
            <sup>
              <TfBadge
                status="error"
                value="2"
                is-counter
              />
            </sup>
          </span>
          Second
        </ElTabPane>

        <ElTabPane
          label="Role"
          name="third"
        >
          Third
        </ElTabPane>

        <ElTabPane
          label="Disabled"
          :disabled="true"
          name="fourth"
        />
      </TfTabs>

      <h3>Overflow showing</h3>
      <div class="overflow-tabs">
        <TfTabs
          v-model="activeNameBigTabsOverflow"
          @tab-click="handleClick"
        >
          <ElTabPane
            v-for="index in 6"
            :key="index"
            :label="`Item ${index}`"
            :name="`item${index}`"
          />
        </TfTabs>
      </div>
    </div>

    <div class="demo-block">
      <h2>Small Tabs (class)</h2>
      <p><strong>value:</strong> {{ activeNameSmallTabs }}</p>
      <h3>Class (legacy)</h3>
      <TfTabs
        v-model="activeNameSmallTabs"
        class="small-tabs"
      >
        <ElTabPane
          v-for="tab in exampleSmallTabs"
          :key="tab"
          :label="tab"
          :name="tab.toLowerCase()"
        >
          {{ tab }}
        </ElTabPane>
      </TfTabs>
      <h3>Type</h3>
      <TfTabs
        v-model="activeNameSmallTabs"
        class="small-tabs"
      >
        <ElTabPane
          label="Plan"
          name="plan"
        >
          Plan
        </ElTabPane>
        <ElTabPane
          label="Rate"
          name="rate"
        >
          Rate
        </ElTabPane>
      </TfTabs>
      <h3>Overflow showing</h3>
      <div class="overflow-tabs">
        <TfTabs
          v-model="activeNameSmallTabsOverflow"
          type="small"
        >
          <ElTabPane
            v-for="index in 6"
            :key="index"
            :label="`Item ${index}`"
            :name="`item${index}`"
          />
        </TfTabs>
      </div>
    </div>

    <div class="demo-block">
      <h2>Text Tabs</h2>
      <p><strong>value:</strong> {{ activeNameTextTabs }}</p>
      <h3>Class (legacy)</h3>
      <TfTabs
        v-model="activeNameTextTabs"
        class="text-tabs"
      >
        <ElTabPane
          label="Plan"
          name="plan"
        >
          Plan
        </ElTabPane>
        <ElTabPane
          label="Rate"
          name="rate"
        >
          Rate
        </ElTabPane>
      </TfTabs>
      <h3>Type</h3>
      <TfTabs
        v-model="activeNameTextTabs"
        type="text"
      >
        <ElTabPane
          label="Plan"
          name="plan"
        >
          Plan
        </ElTabPane>
        <ElTabPane
          label="Rate"
          name="rate"
        >
          Rate
        </ElTabPane>
      </TfTabs>
      <h3>Show overflow</h3>
      <div class="overflow-tabs">
        <TfTabs
          v-model="activeNameTextTabs"
          type="text"
        >
          <ElTabPane
            label="Plan"
            name="plan"
          >
            Plan
          </ElTabPane>
          <ElTabPane
            label="Rate"
            name="rate"
          >
            Rate
          </ElTabPane>
          <ElTabPane
            v-for="index in 6"
            :key="index"
            :label="`More ${index}`"
            :name="`more${index}`"
          />
        </TfTabs>
      </div>
    </div>

    <div class="demo-block">
      <h2>File Tabs</h2>
      <h3>Default</h3>
      <p>
        <strong>value:</strong> {{ activeNameFileTabs }}
      </p>
      <TfTabs
        v-model="activeNameFileTabs"
        type="file"
        closable
      >
        <ElTabPane
          v-for="item in 20"
          :key="item"
          :name="`file ${item}`"
        >
          <div
            slot="label"
            class="label-wrapper"
          >
            <TfTooltip
              :append-to-body="true"
            >
              <span
                slot="reference"
                class="label"
              >
                File {{ item }}
              </span>
              File {{ item }}.doc.xls.xyz.google.com
            </TfTooltip>
            <span
              class="close"
              @click.stop="closeTab(item)"
            ><icon name="times" /></span>
          </div>
        </ElTabPane>
      </TfTabs>

      <h3>Locked</h3>
      <p>
        Note; locked = true results in a different visual treatment only.
        The component using the file tabs needs to handle preventing
        the tab from changing using a before-leave handler.
      </p>
      <TfTabs
        v-model="activeNameFileTabsLocked"
        type="file"
        closable
        locked
        :before-leave="handleLockedTabDisable"
      >
        <ElTabPane
          v-for="item in 20"
          :key="item"
          :name="`file ${item}`"
        >
          <div
            slot="label"
            class="label-wrapper"
          >
            <TfTooltip
              :append-to-body="true"
            >
              <span
                slot="reference"
                class="label"
              >
                File {{ item }}
              </span>
              File {{ item }}.doc.xls.xyz.google.com
            </TfTooltip>
            <span
              class="close"
              @click.stop="closeTab(item)"
            ><icon name="times" /></span>
          </div>
        </ElTabPane>
      </TfTabs>
    </div>
  </div>
</template>

<script>
  export default {
    data: () => ({
      activeNameBigTabs: 'stuff',
      activeNameBigTabsOverflow: 'item1',
      activeNameSmallTabs: 'plan',
      activeNameSmallTabsOverflow: 'item1',
      activeNameTextTabs: 'plan',
      activeNameFileTabs: 'file 1',
      activeNameFileTabsLocked: 'file 1',
      exampleSmallTabs: ['Plan', 'Rate'],
      exampleFileTabs: [
        {
          id: 1,
          name: 'file 1',
          label: 'file 1',
        },
        {
          id: 2,
          name: 'file 2',
          label: 'file 2',
        },
        {
          id: 3,
          name: 'file 3',
          label: 'file 3',
        },
      ],
    }),
    methods: {
      /**
       * Click Handler
       *
       * @param {object} tab
       * @param {event} event
       */
      handleClick(tab, event) {
        // eslint-disable-next-line
        console.log(tab, event); // disabling since this is an example
      },
      /**
       * Fake locking the tabs for this example.
       *
       * @returns {boolean}
       */
      handleLockedTabDisable() {
        return false;
      },
      /**
       * Demo close tab handler
       *
       * @param {object} item
       */
      closeTab(item) {
        /* eslint-disable-next-line no-alert */
        alert(`Sample close handler for item ${item}`);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .overflow-tabs {
    width: 400px;
  }
</style>
