<template>
  <div
    class="s-field row no-wrap items-start"
    :class="{
      's-field-floating': childHasLabel,
      's-field-no-label': !this.label && !this.$slots.label,
      's-field-with-error': hasError,
      's-field-dark': isDark
    }"
  >
    <s-icon v-if="icon" :name="icon" class="s-field-icon s-field-margin"></s-icon>
    <div v-else-if="insetIcon" class="s-field-icon"></div>
    <div class="row col">
      <div
        v-if="hasLabel"
        class="s-field-label col-xs-12  s-field-margin"
        :class="`col-sm-${labelWidth}`"
      >
        <div class="s-field-label-inner row items-center">
          <span v-if="label" v-html="label"></span>
          <slot name="label"></slot>
        </div>
      </div>

      <div class="s-field-content col-xs-12 col-sm">
        <!--<slot></slot>-->
        <div v-if="type === 'text'">
          <s-input v-model="model2" :value="model" :suffix="suffix" :prefix="prefix" :disable="disable" :placeholder="placeholder" :float-label="floatlabel" @input="input2" />
        </div>
        <div v-else-if="type.toLowerCase() === 'textarea'">
          <s-input v-model="model2" type="textarea" :suffix="suffix" :disable="disable" :prefix="prefix" :value="model" :placeholder="placeholder" :float-label="floatlabel" @input="input2" />
        </div>
        <div v-else-if="type.toLowerCase() === 'password'">
          <s-input type="password" v-model="model2" :value="model" :disable="disable" :placeholder="placeholder" :float-label="floatlabel" @input="input2" />
        </div>
        <div v-else-if="type.toLowerCase() === 'number'">
          <s-input type="number" v-model="model2" :placeholder="placeholder" :float-label="floatlabel" />
        </div>
        <div v-else-if="type.toLowerCase() === 'email'">
          <s-input :suffix="suffix" :prefix="prefix" v-model="model" :placeholder="placeholder" :float-label="floatlabel" />
        </div>
        <div v-else-if="type.toLowerCase() === 'date'">
          <q-datetime type="date" v-model="model2" float-label="floatlabel" :min="range.min" :max="range.max" :default-selection="defaultSelection" />
        </div>
        <div v-else-if="type.toLowerCase() === 'datetime'">
          <q-datetime type="datetime" v-model="model2" float-label="floatlabel" :min="range.min" :max="range.max" :default-selection="defaultSelection" />
        </div>
        <div v-else-if="type.toLowerCase() === 'select'">
          <s-autocomplete v-model="model2" @search="search" :min-characters="0" :max-results="6" @selected="selected" :delay="0">
            <s-search v-model="model"></s-search>
          </s-autocomplete>
        </div>
        <div v-else-if="type.toLowerCase() === 'numeric'">
          <s-numeric v-model="model2" class="full-width">
          </s-numeric>
        </div>
        <div v-else-if="type.toLowerCase() === 'toggle'">
          <q-toggle class="orange" v-model="model2" v-bind:value="setCheckValue(model2)" 
          @input="checkValue(model2)"></q-toggle>
        </div>
        <div
          v-if="hasBottom"
          :class="{'s-field-no-input': hasNoInput}"
          class="s-field-bottom row no-wrap"
        >
          <div v-if="hasError && errorLabel" class="s-field-error col" v-html="errorLabel"></div>
          <div v-else-if="helper" class="s-field-helper col" v-html="helper"></div>
          <div v-else class="col"></div>
          <div v-if="counter" class="s-field-counter col-auto">{{ counter }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { QIcon } from '../icon'
import moment from 'moment'

export default {
  name: 's-field',
  components: {
    QIcon
  },
  props: {
    labelWidth: {
      type: Number,
      default: 5,
      validator (val) {
        return val >= 1 && val < 12
      }
    },
    inset: {
      type: String,
      validator (val) {
        return ['icon', 'label', 'full'].includes(val)
      }
    },
    label: String,
    count: {
      type: [Number, Boolean],
      default: false
    },
    type: {
      type: String,
      default: 'text'
    },
    suffix: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    floatlabel: {
      type: String,
      default: ''
    },
    prefix: {
      type: String,
      default: ''
    },
    defaultSelection: moment('1950-01-01T10:40:14.674Z').format(),
    range: {
      min: String,
      max: String
    },
    error: Boolean,
    errorLabel: String,
    model: String,
    helper: String,
    icon: String,
    dark: Boolean,
    disable: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      input: {},
      model2: ''
    }
  },
  created () {
    // console.log(this.range.max)
  },
  computed: {
    hasError () {
      return this.input.error || this.error
    },
    hasBottom () {
      return (this.hasError && this.errorLabel) || this.helper || this.count
    },
    hasLabel () {
      return this.label || this.$slots.label || ['label', 'full'].includes(this.inset)
    },
    childHasLabel () {
      return this.input.floatLabel || this.input.stackLabel
    },
    isDark () {
      return this.input.dark || this.dark
    },
    insetIcon () {
      return ['icon', 'full'].includes(this.inset)
    },
    hasNoInput () {
      return !this.input.$options || this.input.__needsBottom
    },
    counter () {
      if (this.count) {
        const length = this.input.length || '0'
        return Number.isInteger(this.count)
          ? `${length} / ${this.count}`
          : length
      }
    }
  },
  provide () {
    return {
      __field: this
    }
  },
  methods: {
    input2 (val) {
      // this.model2 = val
      console.log(val)
    },
    checkValue (val) {
      var val2 = false
      if (val === true || val === 1) {
        val2 = true
      }
      else {
        val2 = false
      }
      return val2
    },
    setCheckValue (val) {
      var val2 = false
      if (val === true || val === 1) {
        val2 = false
      }
      else {
        val2 = true
      }
      return val2
    },
    search (terms, done) {
      this.$emit('search', terms, done, () => {
      })
    },
    selected (item) {
      this.$emit('selected', item, this.model, () => {
      })
    },
    __registerInput (vm, needsBottom) {
      vm.__needsBottom = needsBottom
      this.input = vm
    },
    __unregisterInput () {
      this.input = {}
    }
  },
  watch: {
    model2: {
      handler: function (val, oldVal) {
        // this.model = this.model2
      }
    }
  }
}
</script>
