<template>
	<MessageBox v-if="openMessageBox && messageType !== MessageBoxType.NotSet" class="z-99 absolute top-10 left-10 openbox">
		<template v-slot:header>
			<h2	class="text-indigo-700 dark:text-indigo-300">
			  <span v-if="messageType === MessageBoxType.Select">{{ t('selectModel', 'Select Model') }}</span>
				<span v-if="messageType === MessageBoxType.Save"> {{ t('DataNeedSaved', 'Data changes not saved') }}</span>
			</h2>
		</template>
		<template v-slot:content>
			<div class="task" v-if="messageType === MessageBoxType.Save && data_url_encoded !== MessageBoxType.NotSet">
				<a
					:href="`data:${data_url_encoded}`"
					:download="`${inputValue}${inputValue.includes('json') ? '' : '.json'}`"
				>{{ t('download_json_data', 'download JSON data') }}</a>
			</div>
			<div
				v-if="messageType === MessageBoxType.Save && data_url_encoded !== MessageBoxType.NotSet"
				class="mt-2 text-xs text-800 dark:text-indigo-100"
			>{{ t('click_link_to_save', 'Click on link to save') }} {{inputValue}}</div>
			<form v-if="messageType === MessageBoxType.OneInput" @submit.prevent="onMessageOkBtn" class="w-full max-w-sm">
				<div class="flex items-center border-b border-indigo-500 py-2">
					<input
						class="appearance-none bg-transparent border-none w-full text-gray-700 dark:text-gray-200 mr-3 py-1 px-2 leading-tight focus:outline-none"
						:type="inputType"
						v-model="oneinputValue"
						:placeholder="input_placeholder"
						aria-label="Full name"
					/>
					<div v-if="inpType === inputType" i-carbon-view @click="onInputType"/>
					<div v-else i-carbon-view-off @click="onInputType"/>
				</div>
			</form>
			<form v-if="messageType === MessageBoxType.Save && show_input" @submit.prevent="onMessageOkBtn" class="w-full max-w-sm">
				<div class="flex items-center border-b border-indigo-500 py-2">
					<input
						class="appearance-none bg-transparent border-none w-full text-gray-700 dark:text-gray-200 mr-3 py-1 px-2 leading-tight focus:outline-none"
						type="text"
						v-model="inputValue"
						:placeholder="input_placeholder"
						aria-label="Full name"
					/>
				</div>
				<div class="flex items-center mt-2 py-2">
						<span class="text-gray-700 dark:text-gray-500 text-sm">{{t('saveload.saveOptions','Save options')}}:</span>
						<div class="mt-0 flex">
							<div v-if="sendurl !== ''" class="mx-2">
								<label class="inline-flex items-center">
									<input type="radio" class="form-radio" name="radio" v-model="inputSaveMode" :checked="inputSaveMode === 'send'" />
									<span class="ml-2 text-sm">{{t('send','Send')}}</span>
								</label>
							</div>
							<div>
								<label class="inline-flex items-center">
									<input type="radio" class="form-radio" name="radio" v-model="inputSaveMode" :checked="inputSaveMode !== 'send'"/>
									<span class="ml-2 text-sm">{{t('local','Local')}}</span>
								</label>
							</div>
						</div>
					<button v-for="(btn:any,idx:number) in input_btns" :key="idx"
						class="flex-shrink-0 bg-indigo-500 hover:bg-indigo-700 border-indigo-500 hover:border-indigo-700 text-sm border-4 text-white py-1 px-2 rounded"
						:class="{'dark:bg-red-400 bg-red-700': btn.typ === 'cancel'}"
						type="button"
						@click="onInputBtn(btn)"
					>{{ t(btn.title) }}</button>
				</div>
			</form>
			<div v-if="messageType === 'select' && Object.keys(select_ops).length > 0" class="inline-block relative w-64">
				<select
					class="block appearance-none w-full bg-white dark:bg-gray-600 border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
					v-model="selectValue"
				>
					<option value=""></option>
					<option v-for="(op: any) in select_ops" :key="op.id" :value="op.id">{{op.title}}</option>
				</select>
				<div
					class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 dark:text-indigo-200 text-indigo-700 dark:bg-gray-600 border-r-1 border-t-1 border-b-1 border-l-0 border-gray-400 "
				>
					<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
						<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
					</svg>
				</div>
			</div>
		</template>
		<template v-slot:button>
			<div class="flex items-center gap-5">
				<button
			    v-if="messageType === MessageBoxType.Select || (messageType === MessageBoxType.Save && data_url_encoded === '')"
					class="btn-msg flex-grow"
					@click="onMessageOkBtn"
				>
				  <span v-if="messageType === MessageBoxType.Select">{{ t('select', 'Select') }}</span>
				  <span v-if="messageType === MessageBoxType.Save && data_url_encoded === ''" >{{ t('save', 'Save') }}</span>
				</button>
				<button  v-if="messageType === MessageBoxType.OneInput" :disabled="oneinputValue === ''" class="btn-msg flex-grow" @click="onMessageOkBtn">{{ t('save', 'Save') }}</button>
				<button  v-else class="btn-msg flex-grow" @click="onMessageCloseBtn">{{ t('close', 'Close') }}</button>
			</div>
		</template>
	</MessageBox>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { useI18n } from 'vue-i18n'
import useState from '~/hooks/useState'
import { MessageBoxType, InputBtnsType, ModelType} from  '~/typs/cv'
import MessageBox from '~/components/MessageBox.vue'

const props = defineProps({
	messageType: {
		type: String as PropType<MessageBoxType>,
		default: MessageBoxType.NotSet,
		required: true,
	},
	openMessageBox: {
		type: Boolean,
		default: false,
		required: true,
	},
  show_input: {
		type: Boolean,
		default: false,
		required: false,
	},
  input_btns: {
		type: Array as PropType<InputBtnsType[]>,
		default: [],
		required: false,
	},
  input_placeholder: {
		type: String,
		default: '',
		required: false,
	}, 
	select_ops: {
		type: Object as PropType<ModelType>,
		default: {},
		required: true,
	},
	data_url_encoded: {
		type: String,
		default: '',
		required: false,
	},
  inpType: {
		type: String,
		default: 'text',
		required: false,
	}, 
})
const emit = defineEmits(['onMessageBox','onInput','onLoadModel'])
const router = useRouter()
const inputType = ref(props.inpType)
const sendurl = router.currentRoute.value.meta.sendurl as string || '/'
const inputValue = useState().current_modelid
const oneinputValue = ref('')
const inputSaveMode = ref(sendurl !== '' ? 'send': 'local')
const selectValue = ref(useState().current_model.value.id)

const t = useI18n().t
const onInputBtn = (btn: InputBtnsType) => {
	emit('onInput', btn )
}
const onMessageOkBtn = () => {
	switch(props.messageType) {
		case MessageBoxType.Save:
			if (inputSaveMode.value === 'send') {
	       emit('onMessageBox', { src: 'sendata', val: inputValue.value })
			} else {
	       emit('onMessageBox', { src: 'savedata', val: inputValue.value })
    	}
			break
		case MessageBoxType.Select:
      if (useState().current_model.value.id !== selectValue.value) {
	      emit('onLoadModel', { id: selectValue.value })
			}
	    emit('onMessageBox', { src: 'done' })
			break
		case MessageBoxType.OneInput:
			if (oneinputValue.value !== '') {
	      emit('onMessageBox', { src: 'oneinput', val: oneinputValue.value })
	    }
	    // emit('onMessageBox', { src: 'done' })
			break
	}
}
const onInputType = () => {
	inputType.value = inputType.value === props.inpType ? 'text' : props.inpType
}
const onMessageCloseBtn = () => {
	emit('onMessageBox', { src: 'done' })
}
</script>