<template>
  <div id="app">
    <div class="container mt-5">
      <input
        v-model="user.rut"
        v-rut
        type="text"
        class="form-control mb-4">
      <input
        v-model="user.name"
        v-uppercase
        type="text"
        class="form-control mb-4">

      <button
        class="btn btn-dark mx-2"
        @click="openSlidePanel">
        Open left
      </button>

      <button
        class="btn btn-dark mx-4"
        @click="openSlidePanel2">
        Open right
      </button>

      <button
        class="btn btn-dark mx-4"
        @click="openSlidePanel3">
        Open top
      </button>

      <button
        class="btn btn-dark mx-4"
        @click="openSlidePanel4">
        Open bottom
      </button>
    </div>

    <div class="container px-0 py-5">
      <m-stepper
        ref="stepper"
        v-model="step"
        class="my-5"
        :steps="4"
        completed-message="Completado"
        :clickable="true" />

      <button
        type="button"
        class="btn btn-dark mx-2"
        @click="$refs.stepper.previous()">
        Previous
      </button>
      <button
        type="button"
        class="btn btn-dark mx-2"
        @click="$refs.stepper.next()">
        Next
      </button>
      <button
        type="button"
        class="btn btn-dark mx-2"
        @click="$refs.stepper.reset()">
        Reset
      </button>
      <button
        type="button"
        class="btn btn-dark mx-2"
        @click="$refs.stepper.complete()">
        Complete
      </button>
    </div>

    <div class="container px-0">
      <m-stepper
        ref="stepper2"
        v-model="step2"
        class="my-5"
        completed-message="Completado"
        :steps="steps2"
        :clickable="true" />

      <div class="">
        <button
          class="btn btn-dark mx-2"
          type="button"
          @click="$refs.stepper2.previous()">
          Previous
        </button>
        <button
          class="btn btn-dark mx-2"
          type="button"
          @click="$refs.stepper2.next()">
          Next
        </button>
        <button
          class="btn btn-dark mx-2"
          type="button"
          @click="$refs.stepper2.reset()">
          Reset
        </button>
      </div>
    </div>

    <div class="">
      <m-full-stepper
        class="d-none"
        main-title="HOLA"
        :steps="[{title: 'Nicolas'}, {title: 'Ignacia'}]"
        :show-custom-submit-mobile="false"
        @on-save="save"
        @on-exit="exit"
        @on-submit="submit" />
    </div>

    <div class="container py-5">
      <m-progress-bar
        :percentage="63"
        background-color="red"
        border-color="blue">
        <template #before="{percentage}">
          <p class="d-sm-block text-right mb-0">
            <i18n path="progress-message">
              <strong>{{ percentage }}</strong>
            </i18n>
          </p>
        </template>
      </m-progress-bar>

      <m-progress-bar
        class="my-3"
        :percentage="200*100/200"
        height="20px">
        <template #inside>
          <span>150/200</span>
        </template>
      </m-progress-bar>

      <m-progress-bar
        :percentage="63"
        background-color="red"
        border-color="blue">
        <template #after="{percentage}">
          <p class="d-sm-block text-right mt-0">
            <i18n path="progress-message">
              <strong>{{ percentage }}</strong>
            </i18n>
          </p>
        </template>
      </m-progress-bar>

      <m-switch-button
        v-model="option"
        justify-content="center"
        active-color="#53c737"
        class="mb-4">
        Configuracion numero 1
      </m-switch-button>

      <m-switch-button
        v-model="option"
        active-color="#53c737"
        class="mb-4">
        Configuración numero 2
      </m-switch-button>

      <section class="purchase-step bg-white rounded-lg">
        <header class="purchase-step__header d-flex justify-content-between align-items-center px-5 py-4">
          <h5 class="text-secondary font-weight-normal mb-0">
            Mi gran titulo que quiero mostrar
          </h5>
          <button
            class="btn btn-link p-0"
            @click="edit">
            Ver más
          </button>
        </header>

        <m-collapsable-content
          :is-open="isOpen"
          classes="bg-primary text-white">
          <div class="purchase-step__content px-5 py-4">
            <p class="mb-1">
              texto lindo por aqui
            </p>

            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Nobis beatae illum dolor rerum pariatur nesciunt accusantium,
              dignissimos culpa earum quia placeat qui voluptatum, sunt consectetur
              eveniet, iure veritatis provident repudiandae.
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Nobis beatae illum dolor rerum pariatur nesciunt accusantium,
              dignissimos culpa earum quia placeat qui voluptatum, sunt consectetur
              eveniet, iure veritatis provident repudiandae.
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Nobis beatae illum dolor rerum pariatur nesciunt accusantium,
              dignissimos culpa earum quia placeat qui voluptatum, sunt consectetur
              eveniet, iure veritatis provident repudiandae.
            </p>
          </div>
        </m-collapsable-content>
      </section>

      <m-shadow-scroll
        class="list"
        vertical-size="6em">
        <div
          v-for="item in listItems"
          :key="item"
          class="list-item">
          {{ item }} Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
        </div>
      </m-shadow-scroll>

      <m-pagination
        :current-page="10"
        :page-count="30"
        :visible-pages-count="7" />

      <div class="loading">
        <m-loading-state
          primary="#e0e5e7"
          secondary="#c1cbcf" />
      </div>

      <m-slide-out-panel ref="slidePanel">
        <template #default>
          <div class="container">
            <m-stepper
              ref="stepper3"
              v-model="step2"
              class="my-5"
              :steps="steps2"
              :clickable="true" />

            <div class="">
              <button
                class="btn btn-dark mx-2"
                type="button"
                @click="$refs.stepper2.previous()">
                Previous
              </button>
              <button
                class="btn btn-dark mx-2"
                type="button"
                @click="$refs.stepper2.next()">
                Next
              </button>
              <button
                class="btn btn-dark mx-2"
                type="button"
                @click="$refs.stepper2.reset()">
                Reset
              </button>
            </div>
          </div>
        </template>
      </m-slide-out-panel>

      <m-slide-out-panel
        ref="slidePanel2"
        open-on="right"
        width="600px"
        classes="shadow-lg">
        <template #default>
          <div>
            <m-progress-bar
              :percentage="63"
              background-color="red"
              border-color="blue">
              <template #after="{percentage}">
                <p class="d-sm-block text-right mt-0">
                  <i18n path="progress-message">
                    <strong>{{ percentage }}</strong>
                  </i18n>
                </p>
              </template>
            </m-progress-bar>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quae reprehenderit
              magnam porro aperiam tenetur placeat nostrum nobis aliquam, esse accusantium.
              Consectetur voluptatem facilis dolorum deleniti quis ab, velit quidem?
            </p>
          </div>
        </template>
      </m-slide-out-panel>

      <m-slide-out-panel
        ref="slidePanel3"
        open-on="top"
        height="30%"
        classes="">
        <template #default>
          <div>
            <m-progress-bar
              :percentage="63"
              background-color="red"
              border-color="blue">
              <template #after="{percentage}">
                <p class="d-sm-block text-right mt-0">
                  <i18n path="progress-message">
                    <strong>{{ percentage }}</strong>
                  </i18n>
                </p>
              </template>
            </m-progress-bar>
          </div>
        </template>
      </m-slide-out-panel>

      <m-slide-out-panel
        ref="slidePanel4"
        open-on="bottom"
        height="60%"
        classes="">
        <template #default>
          <div>
            <m-progress-bar
              :percentage="63"
              background-color="red"
              border-color="blue">
              <template #after="{percentage}">
                <p class="d-sm-block text-right mt-0">
                  <i18n path="progress-message">
                    <strong>{{ percentage }}</strong>
                  </i18n>
                </p>
              </template>
            </m-progress-bar>
          </div>
        </template>
      </m-slide-out-panel>

      <!-- <m-table>
        <template #loading>
          <div class="container p-0 my-3">
            <m-loading-state
              v-bind="$attrs"
              :width="1140"
              :height="525">
              <rect
                x="0"
                y="0"
                rx="4"
                ry="4"
                width="1140"
                height="85" />

              <rect
                x="0"
                y="105"
                rx="4"
                ry="4"
                width="1140"
                height="85" />

              <rect
                x="0"
                y="210"
                rx="4"
                ry="4"
                width="1140"
                height="85" />

              <rect
                x="0"
                y="315"
                rx="4"
                ry="4"
                width="1140"
                height="85" />

              <rect
                x="0"
                y="420"
                rx="4"
                ry="4"
                width="1140"
                height="85" />
            </m-loading-state>
          </div>
        </template>
      </m-table> -->

      <div class="container px-0 py-5">
        <m-table-draggable
          class="rounded bg-white text-warning"
          striped-color="#fff7f7"
          stripe-parity="even"
          background-color="#ffa"
          header-background-color="#adf"
          header-text-color="red"
          body-text-color="blue"
          border-width="4px"
          border-color="#999"
          borders="columns|header|rows|container"
          drag-breakpoint="xs"
          :z-index="10"
          :striped="true"
          :show-shadow-mobile="true"
          :borderless="false"
          :header-items="tableDraggable.header"
          :body-items="tableDraggable.body">
          <!-- Example: Custom Header Column -->
          <template #header-cell-0="{cellData}">
            <button class="btn btn-danger btn-block">
              {{ cellData }}
            </button>
          </template>

          <!-- Example: Custom Header Column -->
          <template #header-cell-3="{cellData}">
            <button class="btn btn-info btn-block">
              {{ cellData.text }}
            </button>
          </template>

          <!-- Example: Custom Header Cell -->
          <template #header-cells="{cellData}">
            <button class="btn btn-warning btn-block">
              {{ cellData }}
            </button>
          </template>

          <!-- Example: Custom Body Row -->
          <template #body-row-0="{rowData,rowStyle}">
            <td
              v-for="(item,index) in rowData"
              :key="index"
              :style="{...rowStyle}">
              <button v-if="index==0">
                Button
              </button>
              <span v-else>
                {{ item.toString().substring(0,2) }} EE
              </span>
            </td>
          </template>

          <!-- Example: Custom Body Cell -->
          <template #body-x1y1>
            X1Y1
          </template>

          <!-- Example: Custom Body Column -->
          <template #body-column-1>
            OOOO
          </template>
        </m-table-draggable>
      </div>

      <div class="container px-0 py-5">
        <m-table-draggable
          :header-items="tableDraggable.header"
          :body-items="tableDraggable.body">
          <template #body-column-1="{cellData}">
            <strong class="text-info">{{ cellData }}</strong>
          </template>
        </m-table-draggable>
      </div>

      <div class="container px-0 py-5">
        <m-input
          id="test-id"
          v-model="mInputValue"
          :label="'Nombre: '"
          :notification-text="'Error default'"
          :custom-class="''"
          :notification-warning="false"
          :notification-error="false"
          :check="false"
          :loading="false"
          :close="false"
          :disabled="false"
          type="text"
          placeholder="Placeholder"
          aria-describedby="test-2" />
      </div>
    </div>
  </div>
</template>

<script>
import MProgressBar from './components/MProgressBar/index.vue';
import MShadowScroll from './components/MShadowScroll/index.vue';
import MStepper from './components/MStepper/index.vue';
import MFullStepper from './components/MFullStepper/index.vue';
import MSwitchButton from './components/MSwitchButton/index.vue';
import MLoadingState from './components/MLoadingState/index.vue';
import MPagination from './components/MPagination/index.vue';
import MSlideOutPanel from './components/MDrawer/index.vue';
import MCollapsableContent from './components/MCollapsableContent/index.vue';
import MInput from './components/MInput/index.vue';
// import MTable from './components/MTable/index.vue';
import MTableDraggable from './components/MTableDraggable/index.vue';

import rut from './directives/formatRut';
import uppercase from './directives/uppercase';

export default {
  name: 'App',
  directives: {
    rut,
    uppercase,
  },
  components: {
    MProgressBar,
    MSwitchButton,
    MShadowScroll,
    MInput,
    MStepper,
    MFullStepper,
    MLoadingState,
    MPagination,
    MSlideOutPanel,
    MCollapsableContent,
    // MTable,
    MTableDraggable,
  },
  data() {
    return {
      rut: '',
      user: {
        name: 'juan ',
        rut: '157365290',
      },
      option: false,
      listItems: 500,
      isOpen: false,
      step: { value: 1 },
      step2: { value: 1 },
      steps2: [
        {
          name: 'step-1', title: '¿Vehículo?', subtitle: 'Los detalles de tu vehículo',
        },
        {
          name: 'step-2', title: '¿Quién?', subtitle: 'Tu información personal',
        },
        {
          name: 'step-3', title: '¿Cual?', subtitle: 'Elige el mejor seguro',
        },
        {
          name: 'step-4', title: 'Compra', subtitle: 'Firma tu contrato',
        },
      ],
      tableDraggable: {
        header: [
          'Item 1',
          'Item 2',
          'Item 3',
          { text: 'Item 4 (Number)', align: 'right' },
        ],
        body: [
          [
            'Content Item 1 - Row 1',
            'Content Item 2 - Row 1',
            'Content Item 3 - Row 1',
            10001,
          ],
          [
            'Content Item 1 - Row 2',
            'Content Item 2 - Row 2',
            'Content Item 3 - Row 2',
            10002,
          ],
          [
            'Content Item 1 - Row 3',
            'Content Item 2 - Row 3',
            'Content Item 3 - Row 3',
            10003,
          ],
          [
            'Content Item 1 - Row 4',
            'Content Item 2 - Row 4',
            'Content Item 3 - Row 4',
            10004,
          ],
          [
            'Content Item 1 - Row 5',
            'Content Item 2 - Row 5',
            'Content Item 3 - Row 5',
            10005,
          ],
        ],
      },
      mInputValue: 'mInputValue',
    };
  },
  methods: {
    save() {
    },
    exit() {
    },
    edit() {
      this.isOpen = !this.isOpen;
    },
    testCustomSubmit() {
    },
    submit() {
    },
    customPrevious() {
      // this.stepIndex -= 1;
    },
    customNext() {
      // this.stepIndex += 2;
    },
    openSlidePanel() {
      this.$refs.slidePanel.openDrawer();
    },
    openSlidePanel2() {
      this.$refs.slidePanel2.openDrawer();
    },

    openSlidePanel3() {
      this.$refs.slidePanel3.openDrawer();
    },

    openSlidePanel4() {
      this.$refs.slidePanel4.openDrawer();
    },
  },
};
</script>

<style lang="scss">
body {
  color: #636e72;

  background-color: #ebedef !important; /* stylelint-disable-line declaration-no-important */
}

.list {
  width: 600px;
  height: 600px;
  margin: 40px auto;
  overflow: hidden;

}

.list-item {
  padding: 20px 40px;
  margin-bottom: 20px;

  background-color: #fff;
  border: 1px solid #808080;
}

.loading {
  width: 400px;
  height: 480px;

  text-align: center;
}

</style>
