<template>
	<div>
		<input
			v-if="typ === InputValueOption.string"
			class="appearance-none bg-transparent border-none w-full text-gray-700 dark:text-gray-200 py-1 leading-tight focus:outline-none"
			:class="{'text-gray-300 dark:text-gray-600': !showitem}"
			type="text"
			:disabled="!edititem || !showitem"
			:value="inputvalue"
			:placeholder="t(title,varname)"
			:aria-label="t(title,varname)"
			@change="onInputChange($event)"
		/>
		<div v-if="typ === InputValueOption.password" class="flex">
			<input
				class="appearance-none bg-transparent border-none w-full text-gray-700 dark:text-gray-200 py-1 leading-tight focus:outline-none"
				:class="{'text-gray-300 dark:text-gray-600': !showitem}"
				:type="show_input ? 'text' : 'password'"
				:disabled="!edititem || !showitem"
				:value="inputvalue"
				:placeholder="t(title,varname)"
				:aria-label="t(title,varname)"
				@change="onInputChange($event)"
			/>
			<button
				class="no-print text-sm float-right icon-btn ml-2 !outline-none text-gray-500 dark:text-gray-400"
				@click.prevent="show_input = !show_input"
			>
				<div v-if="show_input" i-carbon-view-off />
				<div v-else class="noprint flex">
					<div i-carbon-view />
				</div>
			</button>
		</div>
		<input
			v-if="typ === InputValueOption.number"
			class="appearance-none bg-transparent border-none w-full text-gray-700 dark:text-gray-200 py-1 leading-tight focus:outline-none"
			type="number"
			:disabled="!edititem || !showitem"
			:value="inputvalue"
			:placeholder="t(title,varname)"
			:aria-label="t(title,varname)"
			@change="onInputChange($event)"
		/>
		<textarea
			v-if="typ === InputValueOption.content && showitem"
			class="form-control block w-full px-3 py-1.5 text-base font-normal rounded-md resized transition ease-in-out m-0
				text-gray-800 dark:text-gray-200
				bg-white dark:bg-gray-800 bg-clip-padding
				border border-solid border-gray-300  dark:border-gray-500
				focus:text-gray-700 dark:focus:text-gray-300 focus:bg-gray-100 dark:focus:bg-gray-900
				focus:border-gray-700 dark:focus:border-gray-300 focus:outline-none
			"
			:id="`input-${varname}`"
			:rows="rows"
			:value="inputvalue"
			:disabled="!edititem || !showitem"
			:placeholder="t(title,varname)"
			@change="onInputChange($event)"
		></textarea>
	</div>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { MessageType} from '~/typs'
import { InputValueOption,InputValidateOption,InputValueModeOption} from '~/typs/inputs'
import { show_message } from '~/hooks/utils'
import { generate_value} from '~/hooks/tools'
import { input_validate } from '~/hooks/validation'
const emit = defineEmits(['inputChange'])
const props = defineProps({
	typ: {
		type: String as PropType<InputValueOption>,
		default: InputValueOption.string,
		required: true,
	},
	inputvalue: {
		type: [String,Number,Array],
		required: true,
	},
	varname: {
		type: String,
		default: '',
		required: true,
	},
	vardef: {
		type: Object,
		default: {},
		required: false,
	},
	idx: {
		type: Number,
		default: -1,
		required: true,
	},
	rows: {
		type: Number,
		default: 3,
		required: false,
	},
	validate: {
		type: String as PropType<InputValidateOption>,
		default: InputValidateOption.none,
		required: true,
	},
	title: {
		type: String,
		default: '',
		required: true,
	},
	mode: {
		type: String as PropType<InputValueModeOption>,
		default: InputValueModeOption.none,
		required: false,
	},
	edititem: {
		type: Boolean,
		default: true,
		required: true,
	},
	showitem: {
		type: Boolean,
		default: true,
		required: true,
	},
	messages: {
		type: Boolean,
		default: true,
		required: false,
	},
})
const show_input = ref(false)
const onInputChange = (ev: any) => {
	let val = ev.target.value
	if (val.startsWith('?') && props.vardef[props.varname] && props.vardef[props.varname].gen)
	  val = generate_value(props.vardef[props.varname].gen,val)
	if (input_validate(props.typ,props.validate,val)) {
	  emit('inputChange', {val, idx: props.idx})
	} else if (props.messages) {
	  show_message(MessageType.Error, `${t(props.title,props.varname)} not valid`,5000)
	}
}
</script>
