<template>
<div>
	<CheckInput
		v-if="typ === InputValueOption.bool"
		:typ="typ"
		:inputvalue="(dataValue as boolean)"
		:varname="varname"
		:validate="validate"
		:title="title"
		:edititem="edititem"
		:showitem="showitem"
		:messages="messages"
		@input-change="onInputChange"
	/>
	<TextInput
		v-if="typ !== InputValueOption.bool"
		:typ="typ"
		:inputvalue="(dataValue as any)"
		:varname="varname"
		:idx="-1"
		:rows="rows"
		:mode="mode"
		:vardef="vardef"
		:validate="validate"
		:title="title"
		:edititem="edititem"
		:showitem="showitem"
		:messages="messages"
		@input-change="onInputChange"
	/>
	<div v-if="typ === InputValueOption.arrayString">
		<div v-for="(val,elmindex) in dataValue as any" :key="elmindex" class="flex flex-1">
			<TextInput
				:typ="InputValueOption.string"
				:inputvalue="val"
				:varname="varname"
				:idx="elmindex"
		    :vardef="vardef"
				:validate="validate"
				:title="title"
				:edititem="edititem"
				:showitem="showitem"
				:messages="messages"
				@input-change="onInputChange"
			/>
			<button
				v-if="edititem"
				class="no-print text-sm icon-btn mt-1 !outline-none text-gray-500 dark:text-gray-400"
				@click.prevent="onDeleteItem(elmindex,val)"
			>
				<div class="noprint flex"> <div i-carbon-trash-can /> </div>
			</button>
		</div>
		<h4 v-if="edititem" class="w-full flex flex-1 mt-5 px-1 pb-1 border-t-1 border-b-1  border-dotted border-gray-300 dark:border-gray-600 bg-gray-800">
			<label v-if="labelitms && labelitms.length > 0" :for="`id-${section}`"> <span class="text-xs mr-2 text-gray-600 dark:text-gray-500">{{t(labelitms,labelitms)}}</span> </label>
			<input 
				type="text"
				class="appearance-none bg-transparent w-full text-gray-700 dark:text-gray-200 py-1 leading-tight focus:outline-none"
				:class="{'border-b border-indigo-500': edititem && showitem}"
				v-model="inputAdd"
				:disabled="!edititem"
				:id="`id-${section}`"
			/>
			<button
					v-if="edititem"
					class="no-print text-sm float-right icon-btn mt-1 !outline-none text-gray-500 dark:text-gray-400"
					@click.prevent="onAddItem()"
				>
					<div class="noprint flex">
						<div i-carbon-add-filled />
					</div>
			</button>
		</h4>
	</div>
</div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { PropType } from 'vue'
// import { isDefined } from '@vueuse/core'
import TextInput from './forms/TextInput.vue'
import CheckInput from './forms/CheckInput.vue'
import { InputValueOption,InputValidateOption,InputValueModeOption} from '~/typs/inputs'
import { generate_value } from '~/hooks/tools'

const emit = defineEmits(['inputChange','inputAdd','inputDelete'])
const t = useI18n().t
const props = defineProps({
	typ: {
		type: String as PropType<InputValueOption>,
		default: InputValueOption.string,
		required: true,
	},
	section: {
		type: String,
		default: '',
		required: false,
	},
	dataValue: {
		type: [String, Number, Boolean, Array], // as PropType<String[]>],
		default: '',
		required: true,
	},
	validate: {
		type: String as PropType<InputValidateOption>,
		default: InputValidateOption.none,
		required: true,
	},
	varname: {
		type: String,
		default: '',
		required: true,
	},
	vardef: {
		type: Object,
		default: {},
		required: false,
	},
	title: {
		type: String,
		default: '',
		required: true,
	},
	labelitms: {
		type: String,
		default: '',
		required: false,
	},
	rows: {
		type: Number,
		default: 3,
		required: false,
	},
	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 inputAdd = ref('')
const onInputChange = (data: {val: any,idx: number}) => {
	emit('inputChange',{ sec: props.section, key: props.varname, idx: data.idx, val: data.val})
}
const onDeleteItem= (elmindex: number, val: string) => {
	const data = props.dataValue as string[]
  const newData = data.filter((_: any,idx: number) => idx !== elmindex)
	emit('inputChange',{ sec: props.section, key: props.varname, val: newData})
}
const onAddItem= () => {
  const newData = props.dataValue as string[]
  if (inputAdd.value.startsWith('?') && props.vardef[props.varname] && props.vardef[props.varname].gen) {
	  inputAdd.value = generate_value(props.vardef[props.varname].gen,inputAdd.value)
	}
	newData.push(inputAdd.value)
	emit('inputChange',{ sec: props.section, key: props.varname, val: newData})
	inputAdd.value=''
}
onBeforeMount(async() => {
})
</script>
