<template>
  <article class="elements">
    <div class="container elements__container">
      <div class="row elements__row form">
        <header class="col-12 elements__header">
          <h2 class="elements__title">Form fields</h2>
        </header>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <default-input
            input-type="text"
            name="default_one"
            label="Default input text"
            v-model="form.default_one"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.default_one"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
          ></default-input>
        </p>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <default-input
            input-type="text"
            input-style="line"
            name="alternative_one"
            label="Alternative input text"
            v-model="form.alternative_one"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.alternative_one"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
          ></default-input>
        </p>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <default-input
            input-type="text"
            name="default_two"
            label="Default input text error"
            v-model="form.default_two"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.default_two"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
          ></default-input>
        </p>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <default-input
            input-type="text"
            input-style="line"
            name="alternative_two"
            label="Alternative input text error"
            v-model="form.alternative_two"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.alternative_two"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
          ></default-input>
        </p>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <default-input
            input-type="number"
            name="default_three"
            label="Default input number"
            v-model="form.default_three"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.default_three"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
            :min="0"
            :max="10"
            :step="1"
          ></default-input>
        </p>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <default-input
            input-type="number"
            input-style="line"
            name="alternative_three"
            label="Alternative input number"
            v-model="form.alternative_three"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.alternative_three"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
            :min="0"
            :max="10"
            :step="1"
          ></default-input>
        </p>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <icon-input
            name="icon_one"
            label="Default icon input"
            v-model="form.icon_one"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.icon_one"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
            :min="0"
            :max="0"
            icon-img="/images/icons/black/dollar_icon.svg"
          ></icon-input>
        </p>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <icon-input
            input-style="line"
            name="icon_two"
            label="Alternative icon input"
            v-model="form.icon_two"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.icon_two"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
            :min="0"
            :max="0"
            icon-img="/images/icons/black/dollar_icon.svg"
          ></icon-input>
        </p>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <icon-input
            name="icon_three"
            label="Default icon input"
            v-model="form.icon_three"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.icon_three"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
            :min="0"
            :max="0"
            icon-img="/images/icons/black/dollar_icon.svg"
          ></icon-input>
        </p>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <icon-input
            input-style="line"
            name="icon_four"
            label="Alternative icon input"
            v-model="form.icon_four"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.icon_four"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
            :min="0"
            :max="0"
            icon-img="/images/icons/black/dollar_icon.svg"
          ></icon-input>
        </p>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <textarea-input
            name="textarea_one"
            label="Default textarea"
            v-model="form.textarea_one"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.textarea_one"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
          ></textarea-input>
        </p>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <textarea-input
            input-style="line"
            name="textarea_two"
            label="Alternative textarea"
            v-model="form.textarea_two"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.textarea_two"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
          ></textarea-input>
        </p>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <textarea-input
            name="textarea_three"
            label="Default textarea error"
            v-model="form.textarea_three"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.textarea_three"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
          ></textarea-input>
        </p>
        <p class="col-12 col-sm-12 col-md-12 col-lg-6">
          <textarea-input
            input-style="line"
            name="textarea_four"
            label="Alternative textarea error"
            v-model="form.textarea_four"
            placeholder="Placeholder"
            :required="true"
            :errors="errors.textarea_four"
            error-img="/images/icons/messages/tertiary/cross_icon.svg"
            @reset-errors="resetErrors"
          ></textarea-input>
        </p>
      </div>
      <div class="row elements__row ui">
        <header class="col-12 elements__header">
          <h2 class="elements__title">UI elements</h2>
        </header>
        <section class="col-12 col-sm-12 col-md-6 col-lg-3 ui__checkbox">
          <header class="ui__header">
            <h3 class="ui__title">Checkbox</h3>
          </header>
          <checkbox-input
            name="checkbox_one"
            label="Checkbox disabled"
            checkbox-value="checkbox_one"
            v-model="form.selectedItems"
            :disabled="true"
          ></checkbox-input>
          <checkbox-input
            name="checkbox_two"
            label="Checkbox checked"
            checkbox-value="checkbox_two"
            v-model="form.selectedItems"
            :disabled="false"
          ></checkbox-input>
          <checkbox-input
            name="checkbox_three"
            label="Checkbox unchecked"
            checkbox-value="checkbox_three"
            v-model="form.selectedItems"
            :disabled="false"
          ></checkbox-input>
          <checkbox-input
            name="checkbox_four"
            label="Checkbox disabled selected"
            checkbox-value="checkbox_four"
            v-model="form.selectedItems"
            :disabled="true"
          ></checkbox-input>
        </section>
        <section class="col-12 col-sm-12 col-md-6 col-lg-3 ui__radio">
          <header class="ui__header">
            <h3 class="ui__title">Radio buttons</h3>
          </header>
          <radio-input
            name="radio_one"
            label="Radio disabled"
            radio-value="radio_one"
            v-model="form.radioSelect"
            :disabled="true"
          ></radio-input>
          <radio-input
            name="radio_two"
            label="Radio selected"
            radio-value="radio_two"
            v-model="form.radioSelect"
            :disabled="false"
          ></radio-input>
          <radio-input
            name="radio_three"
            label="Radio unselected"
            radio-value="radio_three"
            v-model="form.radioSelect"
            :disabled="false"
          ></radio-input>
          <radio-input
            name="radio_four"
            label="Radio disabled selected"
            radio-value="radio_four"
            v-model="form.radioSelectedDisabled"
            :disabled="true"
          ></radio-input>
        </section>
        <section class="col-12 col-sm-12 col-md-6 col-lg-3 ui__switch">
          <header class="ui__header">
            <h3 class="ui__title">On/Off switch</h3>
          </header>
          <switch-input
            name="switch_one"
            label="Switch one"
            v-model="form.switch_one"
          ></switch-input>
          <switch-input
            name="switch_two"
            label="Switch two"
            v-model="form.switch_two"
          ></switch-input>
        </section>
        <section class="col-12 col-sm-12 col-md-6 col-lg-3 ui__range">
          <header class="ui__header">
            <h3 class="ui__title">Range selectors</h3>
          </header>
          <range-input
            v-model="form.range_one"
            :min="0"
            :max="100"
          ></range-input>
          <range-input
            v-model="form.range_two"
            :min="0"
            :max="100"
          ></range-input>
        </section>
        <section class="col-12 col-sm-12 col-md-6 col-lg-3 ui__loaders">
          <header class="ui__header">
            <h3 class="ui__title">Loaders</h3>
          </header>
          <ring-loader></ring-loader>
          <bubble-ring-loader></bubble-ring-loader>
          <bubble-line-loader></bubble-line-loader>
        </section>
        <section class="col-12 col-sm-12 col-md-6 col-lg-3 ui__controls">
          <header class="ui__header">
            <h3 class="ui__title">Controls</h3>
          </header>
          <div class="row">
            <div class="col-12 col-sm-12 col-md-6">
              <div class="row">
                <div class="col-12 ui__controls-wrapper">
                  <arrows-control
                    @up="up"
                    @down="down"
                    direction="ver"
                  ></arrows-control>
                  <arrows-control
                    @left="left"
                    @right="right"
                    direction="hor"
                  ></arrows-control>
                  <arrow-control
                    @callback="callback"
                    direction="left"
                  ></arrow-control>
                  <arrow-control
                    @callback="callback"
                    direction="right"
                  ></arrow-control>
                </div>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-6">
              <div class="row">
                <div class="col-12 col-sm-12 col-md-6 ui__controls-wrapper">
                  <arithmetic-control
                    operator="addition"
                    @callback="arithmetic"
                  ></arithmetic-control>
                  <arithmetic-control
                    operator="subtraction"
                    @callback="arithmetic"
                  ></arithmetic-control>
                  <arithmetic-control
                    operator="multiplication"
                    @callback="arithmetic"
                  ></arithmetic-control>
                  <arithmetic-control
                    operator="division"
                    @callback="arithmetic"
                  ></arithmetic-control>
                  <line-arrow-control
                    direction="left"
                    @callback="lineArrow"
                  ></line-arrow-control>
                  <line-arrow-control
                    direction="right"
                    @callback="lineArrow"
                  ></line-arrow-control>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </article>
</template>

<script>
export default {
  name: 'elements-ui',
  components: {
    ArithmeticControl: () => import('@/components/buttons/ArithmeticControl.vue'),
    LineArrowControl: () => import('@/components/buttons/LineArrowControl.vue'),
    BubbleRingLoader: () => import('@/components/loaders/BubbleRingLoader.vue'),
    BubbleLineLoader: () => import('@/components/loaders/BubbleLineLoader.vue'),
    ArrowsControl: () => import('@/components/buttons/ArrowsControl.vue'),
    TextareaInput: () => import('@/components/inputs/TextareaInput.vue'),
    CheckboxInput: () => import('@/components/inputs/CheckboxInput.vue'),
    ArrowControl: () => import ('@/components/buttons/ArrowControl.vue'),
    DefaultInput: () => import('@/components/inputs/DefaultInput.vue'),
    IconInput: () => import('@/components/inputs/IconInput.vue'),
    SwitchInput: () => import('@/components/inputs/SwitchInput.vue'),
    RingLoader: () => import('@/components/loaders/RingLoader.vue'),
    RadioInput: () => import('@/components/inputs/RadioInput.vue'),
    RangeInput: () => import('@/components/inputs/RangeInput.vue'),
  },
  data() {
    return {
      form: {
        default_one: '',
        alternative_one: '',
        default_two: '',
        alternative_two: '',
        default_three: '',
        alternative_three: '',
        icon_one: '',
        icon_two: '',
        icon_three: '',
        icon_four: '',
        textarea_one: '',
        textarea_two: '',
        textarea_three: '',
        textarea_four: '',
        selectedItems: ['checkbox_two', 'checkbox_four'],
        radioSelect: 'radio_two',
        radioSelectedDisabled: 'radio_four',
        switch_one: true,
        switch_two: false,
        range_one: 70,
        range_two: [40,85],
      },
      errors: {
        default_one: [],
        alternative_one: [],
        default_two: ['Oops! Smethings not right here.'],
        alternative_two: ['Oops! Smethings not right here.'],
        default_three: [],
        alternative_three: [],
        icon_one: [],
        icon_two: [],
        icon_three: ['Oops! Smethings not right here.'],
        icon_four: ['Oops! Smethings not right here.'],
        textarea_one: [],
        textarea_two: [],
        textarea_three: ['Oops! Smethings not right here.'],
        textarea_four: ['Oops! Smethings not right here.'],
      }
    }
  },
  methods: {
    lineArrow() {
      console.log('lineArrow');
    },
    arithmetic() {
      console.log('arithmetic');
    },
    callback() {
      console.log('callback');
    },
    left() {
      console.log('left');
    },
    right() {
      console.log('right');
    },
    up() {
      console.log('up');
    },
    down() {
      console.log('down');
    },
    resetErrors(key) {
      this.errors[key] = [];
    }
  }
}
</script>

<style lang="scss" scoped>
.elements {
  &__title {
    margin-bottom: 65px;
    margin-bottom: 6.5rem;
  }
  .form {
    margin-bottom: 65px;
    margin-bottom: 6.5rem;
  }
  .ui {
    &__loaders {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    &__controls {
      .row {
        height: 100%;
        .ui__controls-wrapper {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
    }
    &__header {
      margin-bottom: 30px;
      margin-bottom: 3rem;
    }
    &__title {
      @include body-small(medium);
    }
    &__checkbox, &__radio, &__switch {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>

