<template>
  <div class='fancy_input' v-bind:style='{width: width || "auto"}'>
    <div
      style='position: relative; display: inline-block;'
    >
        {{placeholder}}
      <input
        v-bind:type='type || "text"'
        class='fancy_input__input input'
        :class='{
					"fancy_input__input--large": large,
					"fancy_input__input--error": error
				}'
        v-bind:value='value'
        v-on:input='updateValue($event.target.value)'
        @focus='addActive'
        @blur='removeActive'
      >
    </div>
    <error-tooltip :error='error'></error-tooltip>
  </div>
</template>

<script>
  import ErrorTooltip from './ErrorTooltip'

  export default {
    name: 'FancyInput',
    props: ['value', 'placeholder', 'width', 'type', 'error', 'large'],
    components: {
      ErrorTooltip
    },
    data () {
      return {
        active: false
      }
    },
    methods: {
      updateValue (val) {
        this.$emit('input', val);
      },
      addActive () {
        this.active = true;
      },
      removeActive () {
        this.active = false;
      }
    }
  }
</script>

<style lang='scss' scoped>
	@import '../assets/scss/variables.scss';

	.fancy_input {
		display: inline-flex ;
		flex-direction: column ;
		position: relative ;
		margin-top: 0.25rem ;
		margin-bottom: 0.5rem ;

		@at-root #{&}__input {
			transition: border-color 0.2s ;
			width: 100% ;

			@at-root #{&}--large {
				padding: 0.5rem ;
			}
			@at-root #{&}--error {
				border-color: $color__red--primary ;
			}
		}

		@at-root #{&}__placeholder {
			position: absolute ;
			top: 0.35rem  ;
			background-color: #fff;
			left: 0.35rem ;
			color: $color__gray--darkest ;
			pointer-events: none ;
			transition: top 0.2s, font-size 0.2s ;

			@at-root #{&}--large {
				top: 0.55rem ;
				left: 0.6rem ;
			}

			@at-root #{&}--active {
				top: -0.5rem ;
				font-size: 0.75rem ;
				transition: top 0.2s, font-size 0.2s ;
			}
		}
	}
</style>
