<template>
	<ion-item lines="none">
		<ion-row class="loc-row" @click="toggleHelpText()">
    	<ion-label v-if="label" position="stacked" type="button">
    		<span :class="help ? 'loc-label loc-label-with-help' : 'loc-label'">{{label}}</span>
    		<ion-icon v-if="help" class="loc-icon" name="help-circle-outline" size="small" :color="isHelpOpen ? 'primary' : ''"></ion-icon>
    	</ion-label>
      <ion-text v-if="explanation" v-show="explanation && !value ? !isInputField : false" class="loc-explanation-text">{{explanation}}</ion-text>
    </ion-row>
  	<ion-input v-show="explanation && !value ? isInputField : true"
  		ref="inputField" :type="type" :clear-input="clearInput" :autocomplete="autocomplete" :autocorrect="autocorrect" :inputmode="inputmode" 
      :autocapitalize="autocapitalize"
  		:value="value" class="loc-input-field"
      v-on:ionFocus="$emit('focus')" 
  		v-on:ionChange="($event) => $emit('change', $event.target.value)" 
  		v-on:ionBlur="($event) => {$emit('blur', $event.target.value); isInputField = false}" 
  	></ion-input>
  	<ion-text v-if="isHelpOpen" class="loc-text">{{help}}</ion-text>
  	<ion-text v-if="validity.state == 'invalid'" class="loc-text danger">{{validity.message}}</ion-text>
  	<ion-icon v-if="validity.state == 'empty'" name="checkmark-circle" size="small" slot="end" color="medium"></ion-icon>
  	<ion-icon v-if="validity.state == 'invalid'" name="close-circle" size="small" slot="end" color="danger"></ion-icon>
  	<ion-icon v-if="validity.state == 'valid'" name="checkmark-circle" size="small" slot="end" color="success"></ion-icon>
	</ion-item>
</template>

<script lang="ts">
export default {
  props: {
  	label: {
      type: String,
    },
    value: {
      required: true,
    },
    validity: {
      type: Object,
      default: {
			state: 'empty',
			message: '',
		},
    },
    type: {
      type: String,
      default: 'text',
    },
    clearInput: {
      type: Boolean,
      default: false
    },
    autocomplete: {
      type: String,
      default: 'off'
    },
    autocorrect: {
      type: String,
      default: 'off',
    },
    inputmode: {
      type: String,
      default: '',
    },
    help: {
      type: String,
    },
    explanation: {
      type: String,
    },
    autocapitalize:{
      type: String,
      default: 'words'
    }
  },
  data() {
  	return {
  		isHelpOpen: false,
      isInputField: false
  	}
  },
  methods: {
  	toggleHelpText() {
      this.isInputField = !this.isInputField;
      if (this.help) {
        this.isHelpOpen = !this.isHelpOpen;
      } else {
        setTimeout(() => {
          this.$refs.inputField.setFocus();
        }, 300);
      }
  	}
  },
}
</script>

<style scoped lang="css">
	.loc-row {
		padding-top: 9px;
	}
	.loc-label-with-help {
		display: inline-block;
		position: relative; 
		top: -3px;
		margin-right: 6px;
	}
	.loc-icon {
		width: 16px;
		height: 16px;
	}
  .loc-label {
    font-size: 14px;
    font-weight: 600;
  }
	.loc-text {
		padding: 1px 0 8px 0;
		font-size: 13px;
		color: var(--reco-lighter-font-color);
	}
  .loc-explanation-text {
    padding: 2px 0 7px 0;
    font-size: 13px;
    color: var(--reco-lighter-font-color);
    opacity: .8;
  }
	.loc-text.danger {
		color: var(--ion-color-danger);
	}
  .loc-input-field {
    margin-bottom: 5px;
  }
</style>
