<template>
  <article class="components">
    <div class="container components__container">
      <div class="row components__row components__row--dropdowns">
        <header class="col-12 components__header">
          <h2 class="components__title">Dropdown & upload</h2>
        </header>
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 components__wrapper">
          <dropdown
            :dropdown="defaultData"
            v-model="defaultSelected"
          ></dropdown>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 components__wrapper">
          <dropdown-search
            :dropdown="defaultData"
            v-model="searchSelected"
          ></dropdown-search>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 components__wrapper">
          <upload-input
            title="Upload"
            placeholder="Choose a File"
            @upload="uploadFile"
          ></upload-input>
        </div>
      </div>
      <div class="row components__row components__row--tags">
        <header class="col-12 components__header">
          <h2 class="components__title">Tags</h2>
        </header>
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 components__wrapper">
          <tags-wrapper>
            <template slot="tags">
              <tag
                v-for="(tag, index) in tagsData"
                :key="`tag__${index}`"
                :tag="tag"
                :tagType="tag.value"
                tagStyle="rounded"
                :clickable="tag.clickable"
                @remove="removeTag"
              ></tag>
            </template>
          </tags-wrapper>
        </div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 components__wrapper">
          <tags-wrapper>
            <template slot="tags">
              <tag
                v-for="(tag, index) in tagsData"
                :key="`tag__${index}`"
                :tag="tag"
                :tagType="tag.value"
                tagStyle="edges"
                :clickable="tag.clickable"
                @remove="removeTag"
              ></tag>
            </template>
          </tags-wrapper>
        </div>
      </div>
      <div class="row components__row components__row--messages">
        <header class="col-12 components__header">
          <h2 class="components__title">Feedback messages</h2>
        </header>
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 components__wrapper"
          v-for="(message, index) in feedbackData"
          :key="`feedback__${index}`"
        >
          <feedback-message
            :messageType="message.type"
            :messageStyle="message.style"
            :message="message.message"
            @remove="removeMessage(index)"
          ></feedback-message>
        </div>
      </div>
      <div class="row components__row components__row--modals">
        <header class="col-12 components__header">
          <h2 class="components__title">Modals & cookies</h2>
        </header>
        <div class="col-12 components__wrapper">
          <main-button text="Toggle large modal" @callback="toggleModal('large')"></main-button>
          <transition name="fade">
            <modal
              v-if="largeModal"
              size="large"
              title="Modal title"
              content="Eli5 offers more than just lines of code. From designing new business models, automating internal processes, to exploring what blockchain can do for you, our framework of startup methods and agile product development ensures the leanest and most effective innovation possible."
              @close="toggleModal('large')"
            >
              <template slot="cta">
                <main-button text="Close large modal" @callback="toggleModal('large')"></main-button>
              </template>
            </modal>
          </transition>
        </div>
        <div class="col-12 components__wrapper">
          <main-button text="Toggle normal modal" @callback="toggleModal('normal')"></main-button>
          <transition name="fade">
            <modal
            v-if="normalModal"
              size="normal"
              title="Modal title"
              content="Eli5 offers more than just lines of code. From designing new business models, automating internal processes, to exploring what blockchain can do for you, our framework of startup methods and agile product development ensures the leanest and most effective innovation possible."
              @close="toggleModal('normal')"
            >
              <template slot="cta">
                <main-button text="Close normal modal" @callback="toggleModal('normal')"></main-button>
              </template>
            </modal>
          </transition>
        </div>
        <div class="col-12 components__wrapper">
          <main-button text="Toggle cookie modal" @callback="toggleCookie"></main-button>
          <transition name="fade">
            <cookie-modal
              v-if="cookieModal"
              :title="cookieData.title"
              :content="cookieData.content"
              :descriptions="cookieData.descriptions"
              :button="cookieData.button"
              @close="toggleCookie"
            >
            </cookie-modal>
          </transition>
        </div>
      </div>
      <div class="row components__row components__row--navigations">
        <header class="col-12 components__header">
          <h2 class="components__title">Nav bars</h2>
        </header>
      </div>
    </div>
    <navigation
      v-model="boxedNavOne"
      :boxed="true"
      class="components__nav"
    >
      <template slot="avatar">
        <avatar
          source="/images/card.jpg"
          alternative="avatar"
          size="s"
        ></avatar>
      </template>
      <template slot="links">
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'basic' }">Basics</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'buttons' }">Buttons</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'elements' }">Elements</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'cards' }">Cards</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'components' }">Components</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'icons' }">Icons</router-link></li>
      </template>
    </navigation>
    <navigation
      v-model="boxedNavTwo"
      :boxed="true"
      class="components__nav"
    >
      <template slot="links">
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'basic' }">Basics</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'buttons' }">Buttons</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'elements' }">Elements</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'cards' }">Cards</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'components' }">Components</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'icons' }">Icons</router-link></li>
      </template>
    </navigation>
    <navigation
      v-model="fullNavOne"
      :boxed="false"
      class="components__nav"
    >
      <template slot="avatar">
        <avatar
          source="/images/card.jpg"
          alternative="avatar"
          size="s"
        ></avatar>
      </template>
      <template slot="links">
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'basic' }">Basics</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'buttons' }">Buttons</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'elements' }">Elements</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'cards' }">Cards</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'components' }">Components</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'icons' }">Icons</router-link></li>
      </template>
    </navigation>
    <navigation
      v-model="fullNavTwo"
      :boxed="false"
      class="components__nav"
    >
      <template slot="links">
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'basic' }">Basics</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'buttons' }">Buttons</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'elements' }">Elements</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'cards' }">Cards</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'components' }">Components</router-link></li>
        <li class="navigation__item"><router-link class="navigation__link" :to="{ name: 'icons' }">Icons</router-link></li>
      </template>
    </navigation>
    <div class="container components__container">
      <div class="row components__row components__row--avatars">
        <header class="col-12 components__header">
          <h2 class="components__title">Avatars</h2>
        </header>
        <div class="col-12 col-sm-12 col-md-3 col-lg-3 flex-column align-items-end">
          <avatar
            source="/images/card.jpg"
            alternative="avatar"
            size="s"
          ></avatar>
          40x40
        </div>
        <div class="col-12 col-sm-12 col-md-3 col-lg-3 flex-column align-items-end">
          <avatar
            source="/images/card.jpg"
            alternative="avatar"
            size="m"
          ></avatar>
          50x50
        </div>
        <div class="col-12 col-sm-12 col-md-3 col-lg-3 flex-column align-items-end">
          <avatar
            source="/images/card.jpg"
            alternative="avatar"
            size="l"
          ></avatar>
          60x60
        </div>
        <div class="col-12 col-sm-12 col-md-3 col-lg-3 flex-column align-items-end">
          <avatar
            source="/images/card.jpg"
            alternative="avatar"
            size="xl"
          ></avatar>
          70x70
        </div>
        </div>
      </div>
    </div>
  </article>
</template>

<script>
export default {
  name: 'components-ui',
  components: {
    Tag: () => import('@/components/tags/Tag.vue'),
    Modal: () => import('@/components/modals/Modal.vue'),
    Avatar: () => import('@/components/avatars/Avatar.vue'),
    Dropdown: () => import('@/components/dropdowns/Dropdown.vue'),
    TagsWrapper: () => import('@/components/tags/TagsWrapper.vue'),
    MainButton: () => import('@/components/buttons/MainButton.vue'),
    CookieModal: () => import('@/components/modals/CookieModal.vue'),
    UploadInput: () => import('@/components/inputs/UploadInput.vue'),
    Navigation: () => import('@/components/navigations/Navigation.vue'),
    DropdownSearch: () => import('@/components/dropdowns/DropdownSearch.vue'),
    FeedbackMessage: () => import('@/components/messages/FeedbackMessage.vue'),
  },
  data() {
    return {
      defaultData: {
        label: 'Choose your food',
        search: {
          label: 'Search for food',
          arialabel: 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
          placeholder: 'Search for food',
        },
        options: [
          {
            label: 'Pizza',
            value: 'pizza',
          },
          {
            label: 'Nachos',
            value: 'nachos',
          },
          {
            label: 'Subway',
            value: 'subway',
          },
          {
            label: 'Burger King',
            value: 'burger-king',
          },
          {
            label: 'Fries',
            value: 'fries',
          },
          {
            label: 'KFC',
            value: 'kfc',
          },
          {
            label: 'Mc Donalds',
            value: 'mc-donalds',
          },
        ]
      },
      defaultSelected: '',
      searchSelected: '',
      tagsData: [
        {
          label: 'Primary',
          value: 'primary',
          clickable: false,
        },
        {
          label: 'Success',
          value: 'success',
          clickable: true,
        },
        {
          label: 'Error',
          value: 'error',
          clickable: false,
        },
        {
          label: 'Warning',
          value: 'warning',
          clickable: false,
        },
        {
          label: 'Dark',
          value: 'dark',
          clickable: false,
        }
      ],
      feedbackData: [
        {
          message: 'Primary message',
          type: 'primary',
          style: 'filled',
        },
        {
          message: 'Success message',
          type: 'success',
          style: 'filled',
        },
        {
          message: 'Warning message',
          type: 'warning',
          style: 'filled',
        },
        {
          message: 'Error message',
          type: 'error',
          style: 'filled',
        },
        {
          message: 'Primary message',
          type: 'primary',
          style: 'shadow',
        },
        {
          message: 'Success message',
          type: 'success',
          style: 'shadow',
        },
        {
          message: 'Warning message',
          type: 'warning',
          style: 'shadow',
        },
        {
          message: 'Error message',
          type: 'error',
          style: 'shadow',
        },
      ],
      normalModal: false,
      largeModal: false,
      cookieModal: false,
      cookieData: {
        title: 'Cookie title',
        content: 'Eli5 offers more than just lines of code. From designing new business models, automating internal processes, to exploring what blockchain can do for you, our framework of startup methods and agile product development ensures the leanest and most effective innovation possible.',
        button: 'Accept cookies',
        descriptions: {
          accept: 'By clicking this button you accept our cookie policy',
          decline: 'By clicking this button you decline our cookie policy',
        }
      },
      boxedNavOne: false,
      boxedNavTwo: false,
      fullNavOne: false,
      fullNavTwo: false,
    }
  },
  methods: {
    toggleCookie(val) {
      console.log('cookie accepted is: ', val);
      this.cookieModal = !this.cookieModal;
    },
    toggleModal(type) {
      type === 'large' ? this.largeModal = !this.largeModal : this.normalModal = !this.normalModal;
    },
    removeMessage(index) {
      console.log('remove message ', index);
    },
    removeTag(val) {
      console.log('remove tag ', val);
    },
    uploadFile(val) {
      console.log('upload  file', val);
    }
  }
}
</script>

<style lang="scss" scoped>
.components {
  &__row {
    &--tags, &--messages, &--modals {
      margin-top: 30px;
      margin-top: 3rem;
      margin-bottom: 60px;
      margin-bottom: 6rem;
    }
  }
  &__header {
    margin-bottom: 65px;
    margin-bottom: 6.5rem;
  }
  &__wrapper {
    margin-bottom: 30px;
  }
  &__nav {
    position: relative !important;
    margin-bottom: 30px;
    margin-bottom: 3rem;
  }
}
</style>

