<template>
  <b-row>
    <b-col
      lg="9"
      xs="12"
    >
      <Widget id="Animate-css">
        <h3>Animate.css</h3>
        <p>
          animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great
          for emphasis, home pages, sliders, and general just-add-water-awesomeness.
        </p>
        <h4>Example</h4>
        <h1 class="animated infinite fadeIn slow mt mb">
          Fade in
        </h1>
        <vue-code-highlight>&lt;h1 class="animated infinite fadeIn slow"&gt;Fade in&lt;/h1&gt;</vue-code-highlight>
        <p>
          For more examples please refer to <a
            href="https://github.com/daneden/animate.css/"
            target="_blank"
            rel="noopener noreferrer"
          >Animate.css</a>
        </p>
      </Widget>
      <Widget id="Range-slider">
        <h3>Range Input</h3>
        <p>Native HTML5 range input with Bootstrap styling</p>
        <h4>Example</h4>
        <input
          type="range"
          class="form-range"
          :value="14"
          min="0"
          max="20"
        />
        <vue-code-highlight>&lt;input type="range" class="form-range" :value="14" min="0" max="20" /&gt;</vue-code-highlight>
        <p>
          For more examples please refer to <a
            href="https://getbootstrap.com/docs/5.3/forms/range/"
            target="_blank"
            rel="noopener noreferrer"
          >Bootstrap Range</a>
        </p>
      </Widget>
      <Widget id="Font-Awesome">
        <h3>Font-awesome</h3>
        <p>The iconic SVG, font, and CSS toolkit</p>
        <h4>Examples</h4>
        <i class="fa fa-arrow-left fa-2x me" />
        <i class="fa fa-github fa-2x me" />
        <i class="fa fa-bath fa-2x me" />
        <i class="fa fa-grav fa-2x me" />
        <i class="fa fa-telegram fa-2x" />
        <vue-code-highlight>{{ fontAwesomeCode }}</vue-code-highlight>
        <p class="lead">
          Want to see examples?
          <router-link to="/app/components/icons">
            Click
          </router-link>
        </p>
        <p>
          For more examples and documentation please refer to <a
            href="https://github.com/FortAwesome/Font-Awesome"
            target="_blank"
            rel="noopener noreferrer"
          >Font
            Awesome</a>
        </p>
      </Widget>
      <Widget id="Glyphicons-Halflings">
        <h3>Glyphicons-halflings</h3>
        <p>TIncludes over 250 glyphs in font format from the Glyphicon Halflings set</p>
        <h4>Examples</h4>
        <i class="glyphicon glyphicon-asterisk me" />
        <i class="glyphicon glyphicon-heart me" />
        <i class="glyphicon glyphicon-home me" />
        <i class="glyphicon glyphicon-refresh me" />
        <i class="glyphicon glyphicon-camera" />
        <vue-code-highlight>{{ glyphiconCode }}</vue-code-highlight>
        <p class="lead">
          Want to see examples?
          <router-link to="/app/ui/icons">
            Click
          </router-link>
        </p>
        <p>
          For more examples and documentation please refer to <a
            href="https://getbootstrap.com/docs/3.3/components/"
            target="_blank"
            rel="noopener noreferrer"
          >Glyphicons</a>
        </p>
      </Widget>
      <Widget id="Line-Awesome">
        <h3>Line-awesome</h3>
        <p>A single file that replaces Font Awesome with modern line icons.</p>
        <h4>Examples</h4>
        <i class="la la-arrow-left la-2x me" />
        <i class="la la-github la-2x me" />
        <i class="la la-facebook la-2x me" />
        <vue-code-highlight>{{ lineAwesomeCode }}</vue-code-highlight>
        <p class="lead">
          Want to see examples?
          <router-link to="/app/ui/icons">
            Click
          </router-link>
        </p>
        <p>
          For more examples and documentation please refer to <a
            href="https://github.com/FortAwesome/Font-Awesome"
            target="_blank"
            rel="noopener noreferrer"
          >Font
            Awesome</a>
        </p>
      </Widget>
      <Widget id="Md-Editor">
        <h3>MD Editor V3</h3>
        <p>A markdown editor based on Vue 3 that supports a variety of personalized features</p>
        <h4>Example</h4>
        <MdEditor
          v-model="mdContent"
          language="en-US"
          style="height: 300px"
        />
        <vue-code-highlight>&lt;MdEditor v-model="mdContent" language="en-US" style="height: 300px" /&gt;</vue-code-highlight>
        <p>
          For more examples and documentation please refer to <a
            href="https://github.com/imzbf/md-editor-v3"
            target="_blank"
            rel="noopener noreferrer"
          >MD Editor V3</a>
        </p>
      </Widget>
      <Widget id="Skycons">
        <h3>Skycons</h3>
        <p>
          Skycons is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas
          tag.
        </p>
        <Skycon
          icon="CLEAR_DAY"
          color="#17a2b8"
          width="40"
          height="40"
        />
        <vue-code-highlight>&lt;Skycon icon="CLEAR_DAY" color="#17a2b8" width="40" height="40"/&gt;</vue-code-highlight>
        <p>
          For more examples and documentation please refer to <a
            href="https://github.com/darkskyapp/skycons"
            target="_blank"
            rel="noopener noreferrer"
          >Skycons</a>
        </p>
      </Widget>
      <Widget id="Input-masking">
        <h3>Input Masking</h3>
        <p>Phone number formatting with native JavaScript</p>
        <input
          id="int-phone-mask"
          v-model="intPhoneModel"
          class="form-control"
          type="tel"
          placeholder="+1 234 567 8900"
          maxlength="16"
          inputmode="tel"
          @input="formatPhone"
        />
        <vue-code-highlight>
          &lt;input class="form-control" id="int-phone-mask" type="tel"
          placeholder="+1 234 567 8900"
          maxlength="16"
          @input="formatPhone"
          v-model="intPhoneModel"/&gt;
        </vue-code-highlight>
        <p>
          Input masking is now handled with native JavaScript formatters for better Vue 3 compatibility.
        </p>
      </Widget>
      <Widget id="Vue-color">
        <h3>Vue Color</h3>
        <p>Color Pickers for Sketch, Photoshop, Chrome & more with Vue.js(vue2.0).</p>
        <b-input-group class="colorpicker-wrapper">
          <input
            type="text"
            class="form-control"
            :value="color"
          />
          <Chrome
            :class="{ colorpicker: true, 'd-none': !isPickerActive }"
            :model-value="color"
            @update:model-value="(val: any) => color = typeof val === 'string' ? val : val?.hex || '#cccccc'"
          />
          <b-input-group-text @click="isPickerActive = !isPickerActive">
            <div
              class="rect"
              :style="{ backgroundColor: color }"
            />
          </b-input-group-text>
        </b-input-group>
        <vue-code-highlight>{{ vueColorCode }}</vue-code-highlight>
        <p>
          For more examples and documentation please refer to <a
            href="https://github.com/xiaokaike/vue-color"
            target="_blank"
            rel="noopener noreferrer"
          >Vue color</a>
        </p>
      </Widget>
      <Widget id="Vue-select">
        <h3>Vue Select</h3>
        <p>Vue Select is a feature rich select/dropdown/typeahead component</p>
        <Multiselect
          id="default-select"
          v-model="defaultSelect"
          :options="selectOptions"
        />
        <vue-code-highlight>
          &lt;v-select
          id="default-select"
          v-model="defaultSelect"
          :options="['Large Magellanic Cloud', 'Andromeda Galaxy', 'SextansA']"
          /&gt;
        </vue-code-highlight>
        <p>
          For more examples and documentation please refer to <a
            href="https://vue-select.org/"
            target="_blank"
            rel="noopener noreferrer"
          >Vue select</a>
        </p>
      </Widget>
      <Widget id="Textarea-autosize">
        <h3>Auto-sizing Textarea</h3>
        <p>
          Bootstrap Vue Next provides textarea with automatically adjustable height
        </p>
        <BFormTextarea
          id="autosize-textarea"
          v-model="autosizeText"
          placeholder="Try to add few new lines..."
          rows="3"
          auto-size
        />
        <vue-code-highlight>
          &lt;BFormTextarea
          placeholder="Try to add few new lines..."
          rows="3"
          auto-size
          id="autosize-textarea"
          /&gt;
        </vue-code-highlight>
        <p>
          For more examples and documentation please refer to <a
            href="https://bootstrap-vue-next.github.io/bootstrap-vue-next/docs/components/form-textarea"
            target="_blank"
            rel="noopener noreferrer"
          >Bootstrap Vue Next Textarea</a>
        </p>
      </Widget>
      <Widget id="Vue-datepicker">
        <h3>Vue Datepicker</h3>
        <p>
          A feature-rich date picker component for Vue 3
        </p>
        <VueDatePicker
          v-model="selectedDate"
          placeholder="Select a date"
          :enable-time-picker="false"
          dark
        />
        <vue-code-highlight>
          &lt;VueDatePicker
          v-model="selectedDate"
          placeholder="Select a date"
          :enable-time-picker="false"
          dark
          /&gt;
        </vue-code-highlight>
        <p>
          For more examples and documentation please refer to <a
            href="https://vue3datepicker.com/"
            target="_blank"
            rel="noopener noreferrer"
          >Vue Datepicker</a>
        </p>
      </Widget>
      <Widget id="Other">
        <h3 class="">
          Other Libs
        </h3>
        <ul class="check-list">
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > @amcharts</a>.
            JavaScript Charts & Maps Programming library for all your data visualization needs.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > @ckeditor</a>.
            Smart WYSIWYG editor components with collaborative editing.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > @fullcalendar/vue</a>.
            The most popular full-sized JavaScript Calendar.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > animated-number-vue</a>.
            A simple vue animated number for Vue2.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > bootstrap-vue</a>.
            With BootstrapVue you can build responsive, mobile-first projects on the web using Vue.js and the world's
            most popular front-end CSS library — Bootstrap v4.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > highcharts-vue</a>.
            Make your data come alive. Highcharts makes it easy for developers to set up interactive charts in their web pages.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > rickshaw</a>.
            Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at Shutterstock.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > v-calendar</a>.
            An elegant calendar and datepicker plugin for Vuejs.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vee-validate</a>.
            Template Based Validation Framework for Vue.js.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vue-apexcharts</a>.
            Modern & Interactive Open-source Charts.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vue-carousel</a>.
            A flexible, responsive, touch-friendly carousel for Vue.js.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vue-chartjs</a>.
            Easy and beautiful charts with Chart.js and Vue.js.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vue-draggable-nested-tree</a>.
            This is a draggable tree component.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vue-echarts</a>.
            A Declarative Framework for Rapid Construction of Web-based Visualization
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vue-form-wizard</a>.
            A dynamic wizard to split your forms easier.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vue-gallery</a>.
            VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both
            mobile and desktop web browsers.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vue-input-tag</a>.
            A Vue.js 2.0 input tag component inspired in react-tagsinput.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vue-tables-2</a>.
            This Vue package offers an easy and intuitive way of displaying Bootstrap-styled grids with data coming
            either from the client or from the server.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vue-toasted</a>.
            Vue Toasted is One of the Best Toast plugin available for VueJS. it is used by VueJS, Laravel, NuxtJS and
            trusted by many more organizations it is responsive, touch compatible, easy to use, attractive and feature
            rich with icons, actions etc...
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vue2-dropzone</a>.
            A Vue component for file uploads, powered by Dropzone.js.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vue2-google-maps</a>.
            This is the Vue 2.x port of google maps.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vuedraggable</a>.
            Vue drag-and-drop component based on Sortable.js.
          </li>
          <li class="lead">
            <a
              class="fw-semi-bold"
              href="https://github.com/flatlogic/nodejs-backend"
              rel="noopener noreferrer"
              target="_blank"
            > vuetrend</a>.
            Simple, elegant spark lines for Vue.js.
          </li>
        </ul>
      </Widget>
    </b-col>
    <b-col
      lg="3"
      xs="12"
    >
      <Scrollspy
        title="LIBS"
        :ids="[
          'Animate-css',
          'Range-slider',
          'Font-Awesome',
          'Glyphicons-Halflings',
          'Line-Awesome',
          'Md-Editor',
          'Skycons',
          'Input-masking',
          'Vue-color',
          'Vue-select',
          'Textarea-autosize',
          'Vue-datepicker',
          'Other'
        ]"
      />
    </b-col>
  </b-row>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Skycon from '@/components/Skycon/Skycon.vue'
import { Chrome } from '@ckpack/vue-color'
import Multiselect from '@vueform/multiselect'
import Scrollspy from '@/documentation/Scrollspy.vue'
import { MdEditor } from 'md-editor-v3'
import { VueDatePicker } from '@vuepic/vue-datepicker'
import 'md-editor-v3/lib/style.css'
import '@vuepic/vue-datepicker/dist/main.css'

const color = ref('#cccccc')
const isPickerActive = ref(false)
const intPhoneModel = ref('')
const defaultSelect = ref('Andromeda Galaxy')
const mdContent = ref('# Hello World\n\nThis is a **markdown** editor.')
const autosizeText = ref('')
const selectedDate = ref<Date | null>(null)

function formatPhone(event: Event) {
  const input = event.target as HTMLInputElement
  let value = input.value.replace(/\D/g, '')
  if (value.length > 0) {
    value = '+' + value
    if (value.length > 2) {
      value = value.substring(0, 2) + ' ' + value.substring(2)
    }
    if (value.length > 6) {
      value = value.substring(0, 6) + ' ' + value.substring(6)
    }
    if (value.length > 10) {
      value = value.substring(0, 10) + ' ' + value.substring(10)
    }
  }
  intPhoneModel.value = value.substring(0, 16)
}

const fontAwesomeCode = `<i class="fa fa-arrow-left fa-2x me"></i>
<i class="fa fa-github fa-2x me-1"></i>
<i class="fa fa-bath fa-2x me-1"></i>
<i class="fa fa-grav fa-2x me-1"></i>
<i class="fa fa-telegram fa-2x"></i>`

const glyphiconCode = `<i class="glyphicon glyphicon-asterisk me-1"></i>
<i class="glyphicon glyphicon-heart me-1"></i>
<i class="glyphicon glyphicon-home me-1"></i>
<i class="glyphicon glyphicon-refresh me-1"></i>
<i class="glyphicon glyphicon-camera"></i>`

const lineAwesomeCode = `<i class="la la-arrow-left la-2x me-1"></i>
<i class="la la-github la-2x me-1"></i>
<i class="la la-facebook la-2x me-1"></i>`

const vueColorCode = `<b-input-group class="colorpicker-wrapper">
  <input type="text" class="form-control" :value="color"/>
  <Chrome
      :class="{ colorpicker: true, 'd-none': !isPickerActive }"
      :model-value="color"
      @update:model-value="handleColorChange"
  />
  <b-input-group-text @click="isPickerActive = !isPickerActive">
    <div class="rect" :style="{ backgroundColor: color }"></div>
  </b-input-group-text>
</b-input-group>`

const selectOptions = ['Large Magellanic Cloud', 'Andromeda Galaxy', 'SextansA']
</script>
