<template>
  <div>
    <div>
      <div style="margin-top: 100px; margin-left: 50px;">
        <pb-checkbox color="red" :disabled="true" label="holaa"></pb-checkbox>
        <pb-checkbox style="margin-top: 20px;" color="yellow" label="holaa" labelPosition="left"
                     true-value="1" false-value="0"></pb-checkbox>
        <pb-checkbox style="margin-top: 20px;" color="blue" label="hola"></pb-checkbox>
        <pb-checkbox v-model="checkboxValue"
                     style="margin-top: 20px;"
                     color="red"
                     label="hola"
                     labelPosition="left"
                     :value="true"></pb-checkbox>
      </div>
      <div style="display:flex; align-items: center; padding: 20px;">
        <pb-button color="yellow">un boton</pb-button>
        <pb-button color="red" icon="search" icon-position="right" tooltip="hola" tooltip-position="bottom" @click="changeLoading()">un
          boton
        </pb-button>
        <pb-button color="blue" icon="search" type="void" tooltip="hola" tooltip-position="bottom">un boton</pb-button>
        <pb-button color="blue-light" icon="search" type="borderless" tooltip="hola" tooltip-position="bottom">un boton</pb-button>
        <pb-button color="purple" :loading="loading">un boton</pb-button>
        <pb-button color="red" :loading="loading">un boton</pb-button>
        <pb-button color="orange" :loading="loading">un boton</pb-button>
        <pb-button color="yellow" :loading="loading">un boton</pb-button>
        <pb-button color="green" :loading="loading">un boton</pb-button>
        <pb-button color="purple" :loading="loading">un boton</pb-button>
        <pb-button color="secondary" :loading="loading">un boton</pb-button>
        <pb-button color="blue" :loading="loading">un boton</pb-button>
        <pb-button color="blue-light" :loading="loading">un boton</pb-button>
      </div>
      <div style="display:flex; align-items: center; padding: 20px;">
        <pb-input placeholder="hola" v-model="pruebaModel" color="purple"/>
      </div>
      <div style="display:flex; align-items: center; padding: 20px;">
        <pb-input :disabled="true" type="password" label="Disabled" placeholder="hola" v-model="pruebaModel" color="red"/>
      </div>
      <div style="display:flex; align-items: center; padding: 20px;">
        <pb-input v-model="pruebaModel" label="Label:" size="small" icon="search" color="blue-light" placeholder="hola"/>
      </div>
      <div style="display:flex; align-items: center; padding: 20px;">
        <pb-input v-model="pruebaModel"
                  label="Label:"
                  help="longitud menos de 12"
                  :invalid="invalid"
                  :error="error"
                  icon="dimension-user"
                  icon-position="left"
                  placeholder="hola"
                  color="green"/>
      </div>
      <div style="display:flex; align-items: center; flex-direction:column; padding: 20px;">
        <pb-link href="hola" style="margin-bottom: 10px" :underlined="true">next</pb-link>
        <pb-link href="http://www.google.com" icon-position="left" icon="right-arrow" icon-size="big">next</pb-link>
      </div>
      <div style="display:flex; align-items: center; flex-direction:column; padding: 20px;">
        <pb-progress-bar color="blue-light" :progress="25" style="margin-bottom: 10px" :underlined="true"/>
        <pb-progress-bar color="yellow" :rounded="true" type="infinite" style="margin-bottom: 10px" :underlined="true"/>
        <pb-progress-bar color="green" :progress="50" style="margin-bottom: 10px" :underlined="true"/>
        <pb-progress-bar color="green" type="forwards" style="margin-bottom: 10px" :underlined="true"/>
      </div>
      <div style="display:flex; align-items: center; flex-direction:column; padding: 20px;">
        <pb-switch style="margin-top: 20px;" v-model="switchValue" color="yellow" label="holaa" labelPosition="left"
                   true-value="1" false-value="0">
        </pb-switch>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import PbButton from './components/button.component.vue';
  import PbCheckbox from './components/checkbox.component.vue';
  import PbLink from './components/link.component.vue';
  import PbProgressBar from './components/progress-bar.component.vue';
  import PbSwitch from './components/switch.component.vue';
  import PbInput from './components/textbox.component.vue';

  export default {
    name: 'app',
    components: {
      PbButton,
      PbInput,
      PbLink,
      PbProgressBar,
      PbCheckbox,
      PbSwitch
    },
    data: function () {
      return {
        loading: false,
        pruebaModel: '',
        error: '',
        checkboxValue: false,
        switchValue: false,
        invalid: false
      };
    },
    methods: {
      changeLoading() {
        this.loading = !this.loading;
      }
    },
    watch: {
      pruebaModel: function (val) {
        if (val.length > 12) {
          this.error = 'too long';
          this.invalid = true;
        } else {
          this.invalid = false;
        }
      }
    }
  };
</script>

<style lang="scss">
  @import 'assets/sass/reset';
  @import 'assets/sass/resources';
  @import 'assets/sass/default';
  @import 'assets/sass/scroll';
  @import 'assets/sass/styles';

</style>