package account

import "projectreshoot/contexts"

templ ChangeBio(err string, bio string) {
	{{
	user := contexts.GetUser(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>
}