<script setup>
import { ref } from 'vue';

const props = defineProps({
	password: {
		type: String,
		default: null,
	},
	placeholder: {
		type: String,
		default: 'Password',
	},
	autocomplete: {
		type: String,
		default: 'current-password',
	},
});

const emit = defineEmits(['change', 'input']);

const currentPassword = ref(props.password);
const showPassword = ref(false);
</script>

<template>
	<div class="password-container">
		<input
			v-model="currentPassword"
			:type="showPassword ? 'input' : 'password'"
			:placeholder="placeholder"
			:autocomplete="autocomplete"
			minlength="3"
			class="password input"
			@change="emit('change', currentPassword)"
			@input="emit('input', currentPassword)"
		>

		<div
			class="password-show"
			@click="showPassword = !showPassword"
		>
			<Icon
				v-show="!showPassword"
				icon="eye"
				class="password-show"
			/>

			<Icon
				v-show="showPassword"
				icon="eye-blocked"
				class="password-show"
			/>
		</div>
	</div>
</template>

<style scoped>
.input {
	background: var(--background);
	padding-right: 2.5rem;
}

.password-container {
	display: flex;
	position: relative;
}

.password {
	flex-grow: 1;
}

.password-show {
	height: 100%;
	display: flex;
	align-items: center;
	position: absolute;
	right: 0;
	padding: 0 1rem 0 .5rem;

	.icon {
		fill: var(--glass);
	}

	&:hover {
		cursor: pointer;

		.icon {
			fill: var(--primary);
		}
	}
}
</style>
