<template>
	<form autocomplete="off" @submit.prevent="retirement()">
		<h1>Retirement</h1>
		<div class="form-field">
			<label for="">What is your age?</label>
			<input type="number" inputmode="decimal" v-model="age" min="0" />
		</div>

		<div class="form-field">
			<label for="">What age would you like to retire?</label>
			<input type="number" inputmode="decimal" v-model="retireAge" min="0" />
		</div>

		<button class="action-link" type="submit">Calculate</button>
		<output>{{ outputR.value }}</output>
	</form>

	<form autocomplete="off" @submit.prevent="madlib()">
		<h1>Madlib</h1>
		<div class="form-field">
			<label for="">Enter a noun.</label>
			<input type="text" required v-model="noun" />
		</div>
		<div class="form-field">
			<label for="">Enter a verb.</label>
			<input type="text" required v-model="verb" />
		</div>
		<div class="form-field">
			<label for="">Enter an adverb.</label>
			<input type="text" required v-model="adverb" />
		</div>
		<div class="form-field">
			<label for="">Enter an adjective.</label>
			<input type="text" required v-model="adjective" />
		</div>

		<button type="submit">Submit</button>

		<output>
			<p>{{ output.value }}</p>
		</output>
	</form>

	<form autocomplete="off" @submit.prevent="calcArea()">
		<h1>Calculate Area In Feet</h1>
		<div class="form-field">
			<label for="length">What is the length of the room?</label>
			<input type="number" required min="0" v-model.number="length" />
		</div>
		<div class="form-field">
			<label for="width">What is the width of the room?</label>
			<input type="number" required min="0" v-model.number="width" />
		</div>

		<button class="action-link" type="submit">Calculate</button>
		<output>{{ outputA }}</output>
	</form>

	<form autocomplete="off" @submit.prevent="calcPaint()">
		<h1>Calculate the Amount of Paint?</h1>
		<span>350 sq feet requires 1 gallon of paint.</span>

		<button type="submit">Calculate</button>
		<output>{{ outputP }}</output>
	</form>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";

const output = ref("");
const lib = computed(function () {
	return `${noun.value} is ${verb.value} ${adverb.value} while maintaining ${adjective.value} poise!`;
});

const noun = ref("");
const verb = ref("");
const adverb = ref("");
const adjective = ref("");

function madlib() {
	output.value = lib;
}

/////////////////
const outputR = ref("");
const age = ref(25);
const retireAge = ref(65);
const currentYear = new Date().getFullYear();
const ageDifference = computed(function () {
	return retireAge.value - age.value;
});
const retireYear = computed(function () {
	return currentYear + ageDifference.value;
});
const results = computed(function () {
	return `${ageDifference.value} years left until you can retire. It is ${currentYear}, so you can retire in ${retireYear.value}`;
});

function retirement() {
	outputR.value = results;
}

/////////////////////////

const outputA = ref("");
const width = ref();
const length = ref();
const area = computed(function () {
	return length.value * width.value;
});

function calcArea() {
	outputA.value = area.value + " sq feet";
}

///////////////////////

const outputP = ref("");
const paint = computed(function () {
	return Math.ceil(area.value / 350);
});

function calcPaint() {
	outputP.value = paint.value + " cans of paint.";
}

const color = "#4fc08d";
</script>

<style lang="scss">
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
}

h1 {
	border-bottom: 1px solid black;
	margin: 0 auto;
	width: fit-content;
	font-size: 2rem;
}

span {
	display: block;
	padding: 15px 0;
}

output {
	margin: 40px auto;
	max-width: 85%;

	display: flex;
	flex-direction: column;
	gap: 10px;
	font-weight: bold;
}

form {
	padding: 10px;
	margin: 20px auto;
	max-width: 700px;
}

div.form-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	justify-content: center;
	align-items: center;

	label {
		font-size: 1.1rem;
	}

	input {
		width: 60%;
		padding: 7px 0;
		font-size: 1.1rem;
		text-align: center;
	}
}

a,
button {
	color: white;
}

button {
	background-color: v-bind(color);
	border: solid 2px;
	border-radius: 2em;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 0.75em 2em;

	&:hover {
		background-color: white;
		color: v-bind(color);
	}
}
</style>