<script setup lang="ts">
import type { IconType } from '@bagelink/vue'
import { Btn, TextInput } from '@bagelink/vue'

export interface TextInputProps {
	id?: string
	title?: string
	helptext?: string
	placeholder?: string
	label?: string
	small?: boolean
	dense?: boolean
	required?: boolean
	pattern?: string
	shrink?: boolean
	disabled?: boolean
	name?: string
	nativeInputAttrs?: { [key: string]: any }
	icon?: IconType
	iconStart?: IconType
	multiline?: boolean
	autoheight?: boolean
	code?: boolean
	lines?: number
	autofocus?: boolean
	debounceDelay?: number
	autocomplete?: AutoFillField
	onFocusout?: (e: FocusEvent) => void
}
const props = withDefaults(
	defineProps<TextInputProps>(),
	{
		autocomplete: 'current-password',
		label: ''
	}
)

const password = defineModel<string>('modelValue')
const showPwd = defineModel<boolean>('showPwd', { default: false })

const toggleShowPwdIcon = $computed(() => showPwd.value ? 'visibility_off' : 'visibility')
const inputType = $computed(() => (showPwd.value ? 'text' : 'password'))
</script>

<template>
	<div class="relative passwordInput">
		<TextInput
			v-model="password"
			v-bind="props"
			:type="inputType"
			class="mb-0"
			:name="props.name"
		/>
		<div class="m-password position-bottom-end flex column justify-content-center">
			<Btn
				flat
				thin
				class="mx-05"
				:icon="toggleShowPwdIcon"
				@click="showPwd = !showPwd"
			/>
		</div>
	</div>
</template>

<style>
.m-password {
	height: var(--input-height) !important;
}
[dir='rtl'] .passwordInput input {
    direction: ltr;
    text-align: right;
}
</style>
