<template>
  <div :class="classes" :ref-cy="id">
    <label v-if="label || labelIcon" class="label">
      <c-icon
        v-if="labelIcon"
        :size="labelIconSize"
        :icon="labelIcon"
        class="icon"
      />

      <span v-else class="text">{{ label }}</span>

      <span v-if="required" class="required">*</span>
    </label>

    <!-- @slot The default slot for the form field. -->
    <slot />

    <div class="validation" :style="{ height: validationHeight }">
      <transition name="fade" @enter="onEnter" @leave="onLeave">
        <div v-if="!!validation" class="wrapper">
          <c-flag
            error
            class="flag"
            icon="exclamation"
            size="15"
          />
          <span class="text" v-html="validation" />
        </div>
      </transition>
    </div>

    <transition name="fade">
      <div
        class="jumbo-validation"
        v-if="!!validation"
        v-tooltip:5.dark="{ value: validation, align: 'left', fontSize: 14 }"
      >
        <c-icon icon="warning-circle" class="icon" />
      </div>
    </transition>

    <div class="hint" v-if="hint">
      <span class="text" v-html="hint" />
    </div>
  </div>
</template>

<script>
import CFlag from '../CFlag'
import CIcon from '../CIcon'
import CTransition from '../CTransition'
import Tooltip from '../../directives/tooltip'

/**
 * The container component for form fields, anything from select fields, input
 * or checkboxes. Adds standard styles for label, validations and etc.
 */
export default {
  name: 'CInputContainer',
  components: { CFlag, CIcon, CTransition },

  directives: { Tooltip },

  props: {
    /**
     * The id of the field.
     */
    id: {
      type: [String, Number],
      default: ''
    },
    /**
     * The label of the field.
     */
    label: {
      type: String,
      default: ''
    },

    /**
     * Uses a icon a for the field label.
     */
    labelIcon: String,

    /**
     *
     */
    labelIconSize: {
      type: [String, Number],
      default: 24
    },

    /**
     * Displays the label on the left-side instead of in the top.
     */
    labelLeft: Boolean,

    /**
     * The field validation message.
     */
    validation: String,

    /**
     * The field hint message.
     */
    hint: String,

    /**
     * Whether the hint should be displayed.
     */
    showHint: Boolean,

    /**
     * Adds a visual markes to mark the field as required.
     */
    required: Boolean,

    /*
     * Flag to manipulate the upload type
     */
    isUploadType: Boolean
  },

  computed: {
    classes () {
      return [ 'c-input-container', {
        '-label': this.label,
        '-label-left': this.labelLeft,
        '-validation': this.validation,
        '-show-hint': this.showHint
      }]
    }
  },

  data: () => ({
    validationHeight: '0px'
  }),

  methods: {
    onEnter (element) {
      this.$nextTick(() => {
        this.validationHeight = element.clientHeight + 'px'
      })
    },

    onLeave (element) {
      this.validationHeight = '0px'
    }
  },
}
</script>

<style lang="scss">
%validation {
  position: relative;
  transition: height .3s;

  & > .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;

    margin-top: 5px;

    font-weight: 600;
    color: $negative-color;
    -webkit-font-smoothing: antialiased;

    & > .flag {
      margin-right: 5px;
      padding: 2px; // fix icon size
    }

    & > .text {
      font-size: 14px;
      margin-top: 2px; // blame calbertoni

      > b { -webkit-font-smoothing: antialiased; }
    }
  }

  & > .fade-enter-active,
  & > .fade-leave-active {
    transition: opacity .5s !important;
  }

  & > .fade-enter,
  & > .fade-leave-to {
    opacity: 0 !important;
  }
}

.c-input-container:not(.c-upload) {
  position: relative;

  & > .jumbo-validation { display: none; }
  &.-jumbo > .jumbo-validation { display: block; }

  &.-label:not(.-label-left) {
    margin-top: 22px;
    &.multi-check, &.radio { margin-top: 30px; }
  }

  &.-label-left > .label {
    display: flex;
    align-items: center;

    height: 40px;

    top: 0px;
    right: 100%;
    width: 210px;
    text-align: right;
    justify-content: flex-end;
    padding: { left: 20px; right: 20px; }
  }

  & > .label {
    position: absolute;
    top: -20px;
    font-size: 11px;
    margin-bottom: 5px;
    padding-right: 10px;
    text-transform: uppercase;
    font-weight: 500;
    font-family: $title-font-family;
    color: map-get($text-color, base-50);

    & > .required {
      font-size: 10px;
      margin-left: 3px;
      color: map-get($negative-color-map, light);
    }

    & > .icon { fill: map-get($text-color, base-30); }
  }

  & > .validation {
    @extend %validation;
  }

  & > .hint {
    position: absolute;
    width: 999px;
    max-width: 330px;
    top: 50%;
    left: 100%;
    transform: translate(22px, -50%);
    padding-left: 12px;
    visibility: hidden;

    &:before{
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 2px;
      height: 0%;
      background: rgba(#121E48, .1);
      transform: translate(-100%, -50%);
      transition: .3s ease-out;
    }

    &:after{
      content: "";
      position: absolute;
      left: -1px;
      top: 50%;
      width: 6px;
      height: 6px;
      transform: translate(-50%, -50%);
      border-radius: 6px;
      opacity: 0;
      background-color: #121E48;
      transition: .3s ease-out;
    }

    > .text {
      color: #121E48;
      font-size: 14px;
      line-height: 19px;
      display: block;
      transform: translateX(-4px);
      opacity: 0;
      transition: .3s ease-out;
    }
  }

  &.-show-hint{
    @include responsive (tablet, desktop) {
      & > .hint {
        visibility: visible;

        &:before { height: 100%; }
        &:after { opacity: .5; }
        > .text{
          opacity: .5;
          transform: translateX(0px);
        }
      }
    }
  }

  & > .jumbo-validation {
    position: absolute;
    top: calc(50% - 10px);
    right: 20px;
    width: 20px;
    height: 20px;

    & > .icon { fill: map-get($negative-color-map, light); }
  }

  & > .validation {

  }

  &.c-radio-button {
    & > .validation{
      top: initial;
      bottom: -30px;
      @include responsive (tablet, desktop) {
        bottom: -13px;
      }
    }
  }
}

.c-input-container.c-upload {
  & > .validation {
    right: 50%;
    bottom: 15px;
    position: absolute;
    @extend %validation;
    transform: translateX(50%);
  }

  & > .jumbo-validation { display: none; }
}
</style>