package account

import "projectreshoot/pkg/contexts"

templ ChangeBio(err string, bio string) {
	{{ user := contexts.CurrentUser(ctx) }}
	{{
		if bio == "" {
			bio = user.Bio
		}
	}}
	<form
		hx-post="/change-bio"
		hx-swap="outerHTML"
		class="w-[90%] mx-auto mt-5"
		x-data={ templ.JSFuncCall("bioComponent", bio, user.Bio, err).CallInline }
	>
		<script>
			function bioComponent(newBio, oldBio, err) {
				return {
					bio: newBio,
					initialBio: oldBio,
					err: err,
					bioLenText: "",
					updateTextArea() {
						this.$nextTick(() => {
							if (this.$refs.bio) {
								this.$refs.bio.style.height = "auto";
								this.$refs.bio.style.height = `
                                    ${this.$refs.bio.scrollHeight + 20}px`;
							}
							this.bioLenText = `${this.bio.length}/128`;
						});
					},
					resetBio() {
						this.bio = this.initialBio;
						((this.err = ""), this.updateTextArea());
					},
					init() {
						this.$nextTick(() => {
							// this timeout makes sure the textarea resizes on
							// page render correctly. seems 20ms is the sweet
							// spot between a noticable delay and not working
							setTimeout(() => {
								this.updateTextArea();
							}, 20);
						});
					},
				};
			}
		</script>
		<div
			class="flex flex-col"
		>
			<div
				class="flex flex-col sm:flex-row sm:items-center relative"
			>
				<label
					for="bio"
					class="text-lg w-20"
				>Bio</label>
				<div
					class="relative sm:ml-5 ml-0 w-fit"
				>
					<textarea
						type="text"
						id="bio"
						name="bio"
						class="py-1 px-4 rounded-lg text-md
                        bg-surface0 border border-surface2 w-60
                        disabled:opacity-50 disabled:pointer-events-none"
						required
						aria-describedby="bio-error"
						x-model="bio"
						x-ref="bio"
						@input="updateTextArea()"
						maxlength="128"
					></textarea>
					<span
						class="absolute right-0 pr-2 bottom-0 pb-2 text-overlay2"
						x-text="bioLenText"
					></span>
				</div>
			</div>
			<div class="mt-2 sm:ml-25">
				<button
					class="rounded-lg bg-blue py-1 px-2 text-mantle 
                    hover:cursor-pointer hover:bg-blue/75 transition"
					x-cloak
					x-show="bio !== initialBio"
					x-transition.opacity.duration.500ms
				>
					Update
				</button>
				<button
					class="rounded-lg bg-overlay0 py-1 px-2 text-mantle
                    hover:cursor-pointer hover:bg-surface2 transition"
					type="button"
					href="#"
					x-cloak
					x-show="bio !== initialBio"
					x-transition.opacity.duration.500ms
					@click="resetBio()"
				>
					Cancel
				</button>
			</div>
		</div>
		<p
			class="block text-red sm:ml-26 mt-1 transition"
			x-cloak
			x-show="err"
			x-text="err"
		></p>
	</form>
}