css(`
    searchbar- input::placeholder {
      color: #5C504D;
    }
`)

class SearchBar extends Shadow {
	searchText
	width

	constructor(searchText, width) {
		super()
		this.searchText = searchText
		this.width = width
	}

	render() {
		form(() => {
		input("Search", this.width)
			.attr({ name: "searchText", type: "text" })
			.attr({ value: this.searchText ? this.searchText : "" })
			.paddingVertical(0.75, em)
			.boxSizing("border-box")
			.paddingHorizontal(1, em)
			.background("var(--searchbackground)")
			.color("gray")
			.marginBottom(1, em)
			.marginLeft(1, em)
			.marginRight(0.5, em)
			.border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
			.borderRadius(100, px)
			.fontFamily("Arial")
			.fontSize(1, em)
			.cursor("not-allowed")
			.onTouch(function (start) {
				if (start) {
					this.style.backgroundColor = "var(--accent)"
				} else {
					this.style.backgroundColor = "var(--searchbackground)"
				}
			})
		})
		.onSubmit(async (e) => {
		e.preventDefault();
		const data = new FormData(e.target);
		this.dispatchSearchEvent(data.get("searchText"))
		})
	}

	dispatchSearchEvent(searchText) {
		const app = global.currentApp();
		switch (app) {
		case "Jobs":
			window.dispatchEvent(new CustomEvent('jobsearch', {
			detail: { searchText: searchText }
			}));
			break;
		case "Events":
			window.dispatchEvent(new CustomEvent('eventsearch', {
			detail: { searchText: searchText }
			}));
			break;
		case "Announcements":
			window.dispatchEvent(new CustomEvent('announcementsearch', {
			detail: { searchText: searchText }
			}));
			break;
		}
	}
}

register(SearchBar)