import { LitElement, html, css, type PropertyDeclarations } from "lit"

export default class Element extends LitElement {
	static override styles = css`
		.dinosaur-container {
			position: relative;
			width: full;
			height: 100px;
			overflow: hidden; /* Ensures the animation stays within bounds */
		}

		.dinosaur {
			width: 100px;
			height: 100px;
			position: absolute;
			animation: walk 6s linear infinite;
		}

		@keyframes walk {
			0% {
				left: 0;
				transform: scaleX(-1); /* Face right */
			}
			50% {
				left: calc(100% - 100px); /* Move to the right edge */
				transform: scaleX(-1); /* Face right */
			}
			50.01% {
				transform: scaleX(1); /* Flip to face left */
			}
			100% {
				left: 0; /* Move back to the left edge */
				transform: scaleX(1); /* Face left */
			}
		}
	`

	color: string

	static override properties = {
		color: { type: String },
	}

	constructor() {
		super()
		this.color = "green"
	}

	/**
	 * Generates a random color in hexadecimal format.
	 * @returns {string} - The random color.
	 */
	randomColor(): string {
		const letters = "0123456789ABCDEF"
		let color = "#"
		for (let i = 0; i < 6; i++) {
			color += letters[Math.floor(Math.random() * 16)]
		}
		return color
	}

	override render() {
		console.log("render")
		return html`
			<button
				@click=${() => {
					this.color = this.randomColor()
					// reactivity is not triggered when changing the color directly for unknown reasons
					this.requestUpdate()
				}}
			>
				Change color
			</button>
			<div class="dinosaur-container">
				<svg
					class="dinosaur"
					width="100pt"
					height="100pt"
					version="1.1"
					viewBox="0 0 100 100"
					xmlns="http://www.w3.org/2000/svg"
				>
					<path
						fill=${this.color}
						d="m91.801 68c-0.60156-1.1992-24.398 10.199-30.102-4-6.5-16.301-6.6992-44.699-8.5-49.602-1.8008-4.8984-4.1992-15.199-22.898-10.797-17.902 4.1992-23.801 9.1992-21.699 15.098 0.10156 0.60156 0.10156 1.1016 0.19922 1.6016 0.39844 1.5 1.1016 1.8984 1.6016 0.89844 0.5-1.1016 1.3008-0.80078 1.8984 0.60156 0.60156 1.3984 1.1992 1.1992 1.5-0.5s1.1992-1.6992 2 0.10156c0.80078 1.6992 1.8008 1.6016 2.1992-0.19922s1.3984-2.1992 2.1992-0.80078c0.80078 1.3984 2.1016 1.3008 2.8984-0.19922 0.19922-0.39844 0.39844-0.60156 0.60156-0.80078h1.1992c0.10156 0.19922 0.19922 0.39844 0.30078 0.80078 0.39844 1.5 1.1992 1.6992 1.8984 0.5 0.19922-0.30078 0.19922-0.80078 0-1.3008l7.3984-0.10156-7.3008 3.5c-1.1992-0.80078-2.1016-0.69922-2.1016 0.30078 0 1.1992-0.89844 1.1992-2 0.10156-1.1016-1.1016-1.6016-0.60156-1.1992 1.1016 0.10156 0.5 0.10156 0.80078 0.10156 1l-0.80078 0.39844c-0.30078-0.10156-0.69922-0.30078-1.1016-0.69922-1.3984-1.3008-2.3008-0.80078-2 1 0.10156 0.5 0.10156 0.80078 0.10156 1.1992l-1.3984 0.69922c-0.10156-0.10156-0.30078-0.10156-0.39844-0.30078-1.3008-1-2.5-0.60156-2.6016 0.89844-0.10156 0.5-0.19922 0.80078-0.39844 1l-0.69922 0.30078c-0.30078 0-0.60156-0.19922-0.89844-0.5-0.89844-1-1.8008-0.39844-1.8984 1.1992-0.10156 0.89844 0.69922 1.6016 1.8984 1.8008 0.80078 0.5 2.1992 0.80078 4.3984 0.80078 5.1992-0.19922 9.8984-2.1992 12.5-0.19922 0.89844 0.69922 1.3984 7.6016 1.3984 16.398-0.10156 0.10156-0.30078 0.30078-0.39844 0.5-1.6992 1.6992-4.1016 1.3008-6.1016 1.8984-0.89844 0.30078-1.8984 0.60156-2.8984 1.1016-0.80078 0.39844-1.8984 0.69922-2.3008 1.5-0.30078 0.60156-0.30078 1.6016-0.10156 2.1992 0.10156 0.30078 0.60156 1.1992 0.89844 1 0.30078-0.10156 0.30078-0.89844 0.39844-1.1992 0.60156-0.10156 0.5 1 0.89844-0.19922 0.19922-0.60156 0.10156-0.89844 0.80078-1.1016 1.1992-0.39844 2.6992 0 3.8984 0.10156 0.69922 0.10156 1.3984 0.10156 2 0.10156 0.39844 0 1.1016-0.10156 1.3008 0.19922 0.60156 0.80078-1.1992 1.6016-1.6016 2-0.89844 0.80078-1.6016 1.8008-2.3008 2.6992-0.39844 0.60156-1.1016 1.3984-1.1016 2.1992 0 0.5 0.60156 1.6992 0.89844 2 0.5 0.39844 0.80078 0.60156 1 0.10156 0.10156-0.30078-0.10156-0.30078 0.10156-0.60156 0-0.10156 0.5 0 0.60156 0 0.19922-0.60156-0.60156-1-0.5-1.6016 0.19922-0.80078 1.3984-1.3008 2-1.6016 0.39844-0.19922 1.6016-0.80078 2-0.5 0.10156 0 0.10156 0.10156 0.19922 0.19922-0.30078 13.898-1.3984 28.102-3.1992 29.5-3.3984 2.6992-5.3008 3.1992-3.8008 4.8008l6.6016-0.19922s-0.60156-12 8.1016-12.801c8.8086-0.59766 6.5078 12.301 6.5078 12.301s-6.3984 1.5-4.5 3.6016l7.8008-0.30078s-2.1016-16.602 15.398-17.699c14.602-1 29.699-10.398 29.102-11.5zm-56.699-57.398c-0.60156 0-1.1992-0.5-1.1992-1.1016s0.5-1.1992 1.1016-1.1992c0.60156 0 1.1992 0.5 1.1992 1.1016 0.097656 0.59766-0.40234 1.1992-1.1016 1.1992z"
					/>
				</svg>
			</div>
		`
	}
}

customElements.define("walking-dinosaur", Element)