<template>
  <div id="app">
    <div class="m-4">
      <h1>Buttons</h1>
      <div class="example">
        <eb-button-list position="left" class="example">
          <eb-dropdown title="Dammy" icon="user" kind="secondary">
            <eb-dropdown-item href="#">Profile</eb-dropdown-item>
            <eb-dropdown-divider />
            <eb-dropdown-item href="#">Help</eb-dropdown-item>
            <eb-dropdown-item href="#">Logout</eb-dropdown-item>
          </eb-dropdown>
          <eb-button kind="secondary" submit>Secondary Button With Type Submit</eb-button>
          <eb-button kind="primary" reset>Primary Button with Type Reset</eb-button>
          <eb-button kind="azure">Azure Button</eb-button>
          <eb-button kind="success" pill>Success Pill Button</eb-button>
          <eb-button kind="lime" square>Square Button</eb-button>
          <eb-button kind="indigo" large>Large Button</eb-button>
          <eb-button kind="dark" icon="square" large>Large Button with Icon</eb-button>
          <eb-button kind="yellow" small>Small Button</eb-button>
          <eb-button kind="orange" icon="square" icon-right small>Dark Small Button with Icon</eb-button>
          <eb-button kind="link">Button Link</eb-button>
          <eb-button kind="dark" block outline square>Button Block</eb-button>
          <eb-button kind="warning" outline>Outlined Button</eb-button>
          <eb-button kind="purple" disabled>Disabled Button</eb-button>
          <eb-button color="pink">Button using Color</eb-button>
          <eb-button color="pink" outline>Outlined Button using Color</eb-button>
          <eb-button kind="primary" icon="square">Button with Icon</eb-button>
          <eb-button kind="primary" icon="bell" icon-only></eb-button>
          <eb-button kind="primary" icon="bell" loading block></eb-button>
          <eb-button
            kind="primary"
            class="m-2"
            icon="arrow-right"
            icon-family="fas"
            icon-right
          >Button with Icon</eb-button>
        </eb-button-list>

        <br />
      </div>
    </div>

    <div class="m-4">
      <h1>Links</h1>
      <div class="example text-center">
        <!-- <eb-link to="/" class="mr-2">Router Link</eb-link> -->
        <eb-link href="/" class="m-2">Normal Link</eb-link>
        <br />
        <!-- <eb-link href="/" class="mr-2" inertia>Inertia Link</eb-link> -->
        <eb-link href="#logos" class="m-2" scroll>Scroll Link to Logo</eb-link>
        <br />
      </div>
    </div>

    <div class="m-4">
      <h1>Money</h1>
      <div class="example text-center">
        <h2>
          <eb-money currency="GBP" amount="3000" class="m-2" />
        </h2>
        <br />
        <h2>
          <eb-money currency="AED" amount="3000" class="m-2" />
        </h2>
        <br />
        <h2>
          <eb-money currency="USD" amount="50000" class="m-2" />
        </h2>
      </div>
    </div>

    <div class="m-4">
      <h1>Date</h1>
      <div class="example text-center">
        <h2>
          <eb-date date="2018-07-16" display="relative" compareDate="2023-12-26" class="m-2" />
        </h2>
        <br />
        <h2>
          <eb-date date="2018-07-16" display="relative" class="m-2" />
        </h2>
        <br />
        <h2>
          <eb-date date="2020-07-16" display="relative" class="m-2" />
        </h2>
        <br />
        <h2>
          <eb-date date="2020-07-16 00:50:00" display="date" class="m-2" />
        </h2>
        <br />
        <h2>
          <eb-date date="2020-07-16" time="00:40:00" class="m-2" />
        </h2>
      </div>
    </div>

    <div class="text-center m-4">
      <h1 class="mb-2">Icons</h1>
      <div class="mb-4">
        <h2>Using Other Icon Sets</h2>
        <div class="example">
          <eb-icon type="user" family="far" class="mr-2" color="#08f" />
          <eb-icon
            type="circle-notch"
            animation="spin"
            animation-speed="slow"
            family="fas"
            class="mr-2"
            size="4rem"
          />

          <eb-icon
            type="spinner"
            animation="pulse"
            animation-speed="fast"
            family="fas"
            class="mr-2"
            size="32"
          />
          <eb-icon type="github" family="fab" class="mr-2" size="64" color="#08f" />
        </div>
      </div>

      <h2 class="mt-4">Inbuilt Icons</h2>
      <div class="example mb-4">
        <p>
          <eb-text-input placeholder="Search icons..." @input="input" :value="keyword" />
        </p>
        <ul class="icons">
          <li v-for="icon in icons" :key="icon">
            <eb-icon :type="icon" size="24" />
            <span>{{ icon }}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="m-4">
      <h1 id="logos">Logo</h1>
      <div class="example">
        <eb-logo class="m-4"></eb-logo>
        <eb-logo class="mr-4" icon></eb-logo>
        <br />

        <eb-logo type="corporate" primary-color="#E5303E" class="m-4"></eb-logo>
        <eb-logo type="corporate" tertiary-color="#262526" class="m-4" icon></eb-logo>
        <br />

        <eb-logo type="tv" class="m-4"></eb-logo>
        <eb-logo type="tv" class="m-4" icon></eb-logo>
        <br />

        <eb-link href="#app" class="btn btn-primary m-2" scroll>Back to Top</eb-link>
      </div>
    </div>

    <div class="m-4">
      <h1>Forms</h1>
      <div class="example">
        <eb-text-input label="First Name" placeholder="Enter first name" />
        <eb-text-input
          label="Facebook"
          placeholder="https://facebook.com/"
          icon="facebook"
          icon-left
        />
        <eb-tel-input label="Phone Number" :preferred-countries="['ng', 'gb']" show-dial-code />

        <eb-tel-input label="Another Phone Number" :only-countries="['ng', 'gb']" />

        <eb-password-input
          label="Password"
          placeholder="Enter password..."
          show-strength-meter
          password-visible
        />

        <eb-password-input
          label="Another Password"
          placeholder="Enter Another password..."
          show-strength-meter
          password-visible
        />

        <eb-password-input label="Confirm Password" placeholder="Confirm password..." />

        <eb-checkbox label="Remember Me" />

        <eb-textarea placeholder="Search icons..." autosize>Hello</eb-textarea>

        <eb-select-input label="Skills" :options="['PHP', 'JS']"></eb-select-input>

        <eb-tags-input label="Tags Input" placeholder="Select Skills" />

        <eb-select-input label="Others">
          <template slot="option" slot-scope="option">
            <span class="fa" :class="option.icon"></span>
            {{ option.title }}
          </template>
        </eb-select-input>
      </div>
    </div>

    <div class="m-4">
      <h1>Tag</h1>
      <div class="example">
        <eb-tag label="Mars" />
        <eb-tag kind="blue" label="Venus" />
        <eb-tag kind="red" label="Pluto" rounded />
        <eb-tag label="Saturn" rounded />
      </div>
    </div>

    <div class="m-4">
      <h1>Images</h1>
      <div class="example">
        <eb-image
          src="https://images.unsplash.com/photo-1556228149-0b37a8638663?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80"
          class="img img-resposive thumbnail"
        />
      </div>
    </div>

    <div class="m-4">
      <h1>Color Picker</h1>
      <div class="example">
        <!-- <eb-color-picker/> -->
      </div>
    </div>

    <div class="m-4">
      <h1>Modal</h1>
      <div class="example">
        <eb-modal name="hello">Hello</eb-modal>
        <eb-button @click="$modal.show('hello')">Open Modal</eb-button>
      </div>
    </div>

    <div class="m-4">
      <h1>Toggle</h1>
      <div class="example">
        <eb-toggle @change="onChangeEventHandler" />

        <eb-toggle :value="false" />

        <eb-toggle :value="false" color="#82C7EB" :sync="true" :labels="true" />

        <eb-toggle :value="true" :labels="{checked: 'Foo', unchecked: 'Bar'}" />
      </div>
    </div>

    <div class="m-4">
      <h1>Slider</h1>
      <div class="example">
        <eb-slider value="60" type="primary" />
      </div>
    </div>

    <div class="m-4">
      <h1>Card</h1>
      <div class="example">
        <div class="row row-cards row-deck">
          <div class="col-md-6">
            <eb-card
              status
              status-position="left"
              title="Bad Pikin"
            >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!</eb-card>
          </div>
          <div class="col-md-6">
            <eb-card
              title="Bad Pikin"
              loading
            >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!</eb-card>
          </div>
        </div>
      </div>
    </div>

    <div class="m-4">
      <h1>Date Picker</h1>
      <div class="example text-center">
        <eb-date-picker
          pattern="\d{1,2}/\d{1,2}/\d{4}"
          placeholder="mm/dd/yyyy"
          :config="flatpickrOptions"
          @onChange="actionChange"
          v-model="date"
        ></eb-date-picker>

        <eb-date-picker
          with-buttons
          placeholder="mm/dd/yyyy"
          :config="flatpickrOptions"
          @onChange="actionChange"
          v-model="date"
        ></eb-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
import feather from 'feather-icons';

const icons = Object.keys(feather.icons);

export default {
  name: 'app',
  data() {
    return {
      flatpickrOptions: {
        enableTime: true,
        minTime: '16:00',
        maxTime: '22:00',
        wrap: true, // set wrap to true only when using 'input-group'
        altFormat: 'M	j, Y',
        altInput: true,
        dateFormat: 'Y-m-d  H:i'
      },
      icons,
      keyword: '',
      date: '',
      options: [
        {
          title: 'Read the Docs',
          icon: 'fa-book',
          url: 'https://codeclimate.com/github/sagalbot/vue-select'
        },
        {
          title: 'View on GitHub',
          icon: 'fa-github',
          url: 'https://codeclimate.com/github/sagalbot/vue-select'
        },
        {
          title: 'View on NPM',
          icon: 'fa-database',
          url: 'https://codeclimate.com/github/sagalbot/vue-select'
        },
        {
          title: 'View Codepen Examples',
          icon: 'fa-pencil',
          url: 'https://codeclimate.com/github/sagalbot/vue-select'
        }
      ]
    };
  },
  methods: {
    actionChange() {},
    input(event) {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.filter(event.target.value);
      }, 300);
    },
    onChangeEventHandler() {},

    filter(value) {
      value = value.trim().toLowerCase();
      this.icons = icons.filter(icon => icon.indexOf(value) !== -1);
      this.keyword = value;
    }
  }
};
</script>

<style>
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css);
@import '../dist/eventbree-vue.css';
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
}

.example {
  padding: 1.5rem;
  border: 1px solid rgba(0, 40, 100, 0.12);
  border-radius: 3px 3px 0 0;
  font-size: 0.9375rem;
}

.icons {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.icons > li {
  background-color: #f8f8f8;
  padding: 0.5rem 1rem;
  transition: color 0.15s;
}

.icons > li:hover {
  color: #0074d9;
}

.icons > li > i {
  vertical-align: middle;
}

.icons > li > span {
  color: gray;
  margin-left: 0.5rem;
  transition: color 0.15s;
}

.icons > li:hover > span {
  color: inherit;
}
</style>
