combobox._hs

behavior combobox

	init
		add .combobox to me
		set :input to the first <input/> in me
		set :menu to the first <[role=menu]/> in me
		set :menu's *top to my height

		for menuItem in (:menu).children
			add [@role=menuitem] to menuItem 
		end

	-- -------------------------
	-- INPUT EVENTS
	-- -------------------------

	on focus from <input/> in me
		exit

	on blur from <input/> in me
		if menuIsVisible() then
			wait 100ms
			call hideMenu()
		end
		
	-- -------------------------
	-- MOUSE EVENTS
	-- -------------------------

	on click from <.open-button /> in me
		focus() the :input
		call toggleMenu()

	on mouseover
		if target's [@role] == "menuitem" then
			take .selected for target
		end

	on mousedown
		if target's [@role] == "menuitem" then
			set item to target
		else
			set item to the closest <[role="menuitem"]/> to the target
		end

		if the item is not null then 
			call selectMenuItem(item)
			call hideMenu()
			call :input.focus()
		end

	-- -------------------------
	-- KEYBOARD EVENTS
	-- -------------------------

	on keydown[code=="ArrowDown"]
		halt the event

		if menuIsHidden() then
			call showMenu()
			exit
		end

		set selected to getSelectedItem()
		
		if selected is null then 
			take .selected for the first <[role="menuitem"]/> in me
			exit
		end

		set nextItem to the next <[role="menuitem"]/> from selected 

		if nextItem is not null then
			take .selected for nextItem
			call nextItem.scrollIntoView({block:"nearest"})
		end

	on keydown[code=="ArrowUp"]
		halt the event

		if menuIsHidden() then
			call showMenu()
			exit
		end
		
		set selected to getSelectedItem()
		
		if selected is null then 
			take .selected for the last <[role="menuitem"]/> in :menu
			exit
		end

		set prevItem to the previous <[role="menuitem"]/> from selected

		if prevItem is not null then
			take .selected for prevItem
			call prevItem.scrollIntoView({block:"nearest"})
		end

	on keypress[code=="Enter"]
		if menuIsVisible then
			halt the event
			set current to the first <[role="menuitem"].selected /> in me
			call selectMenuItem(current)
			call hideMenu()
		end

	on keypress[code=="Escape"]
		call hideMenu()

	-- -------------------------
	-- PRIVATE FUNCTIONS OMG!!
	-- -------------------------

	def menuIsVisible
		return (:menu's *opacity is 1)

	def menuIsHidden
		return (:menu's *opacity is 0)

	def showMenu
		if menuIsHidden() then
			remove [@hidden] from :menu
			set the :menu's *opacity to 1
		end

	def hideMenu
		if menuIsVisible() then
			async do
				wait a tick
				transition the :menu's opacity to 0 over 100ms
				add [@hidden=true] to :menu
			end
		end

	def toggleMenu
		if menuIsVisible() then
			call hideMenu()
		else
			call showMenu()
		end


	def selectMenuItem(node)
		if node is not null then
			set :input.value to getValue(node)
		end

	def getSelectedItem
		return the first <[role="menuitem"].selected /> in :menu

	def getValue(node)
		set value to the node's [@value]
		if value is not null then
			return value
		end
		return the node's innerText