<template>
<div v-if="dataValue && dataVars" class="pb-2 w-full" >
	<div v-for="(key: string) in Object.keys(dataValue)" :key="key">
		<h4 class="w-full mt-5 px-1 pb-1 border-t-1 border-b-1  border-dotted border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
			<span 
				class="ml-1 mt-5 text-normal font-medium text-indigo-800 dark:text-indigo-400"
				:class="{'text-gray-300 dark:text-gray-600': !showitem}"
			>
				{{ key }}
			</span>
			<button
				v-if="edititem"
				class="no-print mt-2 text-sm float-right icon-btn !outline-none text-gray-500 dark:text-gray-400"
				@click.prevent="onDeleteItem(key)"
			>
				<div class="noprint flex">
					<div i-carbon-trash-can />
				</div>
			</button>
			<button
				v-if="vardef.email && dataValue[key] && dataValue[key].active"
				class="flex no-print text-sm float-right icon-btn mt-2 mx-2 !outline-none text-gray-500 dark:text-gray-400"
				@click="onEmailItem(key)" 
			>
				<div class="noprint flex">
					<div i-carbon-email />
				</div>
			</button>
		</h4>
		<div class="w-full lg:w-6/12 sm:max-w-sm">
		  <div v-for="(varky: string) in Object.keys(dataVars)" :key="varky" class="">
				<label :for="`${varky}-${key}`">
				  <span class="text-xs text-gray-600 dark:text-gray-500">
					  {{t(`${section}.${varky}`,varky)}}
				  </span>
				</label>
				<InputValue 
					:typ="dataVars[varky].typ"
					:class="{'border-b border-indigo-500': edititem && showitem}"
					:dataValue="dataValue[key][varky]"
					:section="key"
					:varname="varky"
					:vardef="dataVars"
					:title="`${section}.${varky}`"
					:edititem="edititem"
					:showitem="showitem"
					:validate="dataVars[varky].valid ? dataVars[varky].valid : InputValidateOption.none"
					:messages="true"
					@input-change="onInputChange"
				/>	
			</div>
		</div>
	</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-100 dark:bg-gray-700">
		<label v-if="labelitms && labelitms.length > 0" :for="`id-${varname}`"> <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-${varname}`"
			@keyup.enter.exact="onAddItem"
		/>
		<button
			v-if="edititem"
			class="no-print mt-2 text-sm float-right icon-btn !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>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { useI18n } from 'vue-i18n'
import InputValue from '@/InputValue.vue'
import { InputValueOption, InputValidateOption,VarsDataType} from '~/typs/inputs'
import { generate_value,email_info } from '~/hooks/tools'

const emit = defineEmits(['inputChange','inputModelAdd','inputModelDelete'])
const t = useI18n().t
const props = defineProps({
	typ: {
		type: String as PropType<InputValueOption>,
		default: InputValueOption.string,
		required: true,
	},
	section: {
		type: String,
		required: false,
	},
	dataValue: {
		type: Object,
		required: true,
	},
	dataVars: {
		type: Object as PropType<VarsDataType>,
		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,
	},
	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: {sec: string, key: string, val: any,idx: number}) => {
	const newData = props.dataValue
	if (newData[data.sec]) 
	  newData[data.sec][data.key]=data.val
	emit('inputChange',{ sec: props.section, key: props.varname, idx: data.idx, val: newData})
}
const onDeleteItem= (id: string) => {
	const newData = Object.keys(props.dataValue).filter((key) => key !== id).
    reduce((cur, key) => { return Object.assign(cur, { [key]: props.dataValue[key] })}, {});
	emit('inputChange',{ sec: props.section, key: props.varname, idx: -1, val: newData})
}
const onAddItem= () => {
	const newData = props.dataValue
	const newItem : any= {}
	Object.keys(props.dataVars).forEach(itm => {
	//	switch(props.dataVars[itm].typ) {
	//	 	case InputValueOption.string:
	//		 break
	//	}
		newItem[itm] = props.dataVars[itm].dflt
  })
	if (inputAdd.value.startsWith('?') && props.vardef.gen)
	  inputAdd.value = generate_value(props.vardef.gen,inputAdd.value)
	newData[inputAdd.value] = newItem
	emit('inputChange',{ sec: props.section, key: props.varname, idx: -1, val: newData})
	inputAdd.value = ''
}
const onEmailItem= (id: string) => {
	const targetData: any = Object.keys(props.dataValue).filter((key) => key === id).
    reduce((cur, key) => { return Object.assign(cur, { [key]: props.dataValue[key] })}, {});
	Object.keys(targetData).forEach((ky: string) => {
		email_info(props.varname,props.vardef,ky,targetData[ky],t(props.title,props.varname))
	})
}
</script>
