title: $:/core/macros/tag-picker
tags: $:/tags/Macro
first-search-filter: [tags[]!is[system]search:title<userInput>sort[]]
second-search-filter: [tags[]is[system]search:title<userInput>sort[]]

\define get-tagpicker-focus-selector() [data-tiddler-title="$(currentTiddlerCSSEscaped)$"] .tc-add-tag-name input

\define delete-tag-state-tiddlers() <$action-deletetiddler $filter="[<newTagNameTiddler>] [<storeTitle>] [<tagSelectionState>]"/>

\define add-tag-actions(actions,tagField:"tags")
\whitespace trim
<$set name="tag" value={{{ [<__tiddler__>get[text]] }}}>
	<$list
		filter="[<saveTiddler>!contains:$tagField$<tag>!match[]]"
		variable="ignore"
		emptyMessage="<$action-listops $tiddler=<<saveTiddler>> $field=<<__tagField__>> $subfilter='-[<tag>]'/>"
	>
		<$action-listops $tiddler=<<saveTiddler>> $field=<<__tagField__>> $subfilter="[<tag>trim[]]"/>
		<$transclude $variable="__actions__"/>
	</$list>
</$set>
<<delete-tag-state-tiddlers>>
<$action-setfield $tiddler=<<refreshTitle>> text="yes"/>
\end

\define clear-tags-actions-inner()
\whitespace trim
<$list
	filter="[<storeTitle>has[text]] [<newTagNameTiddler>has[text]]"
	variable="ignore"
	emptyMessage="<<cancel-delete-tiddler-actions 'cancel'>>"
>
	<<delete-tag-state-tiddlers>>
</$list>
\end

\define clear-tags-actions()
\whitespace trim
<$set name="userInput" value={{{ [<storeTitle>get[text]] }}}>
	<$list filter="[<newTagNameTiddler>get[text]!match<userInput>]" emptyMessage="<<clear-tags-actions-inner>>">
		<$action-setfield $tiddler=<<newTagNameTiddler>> text=<<userInput>>/><$action-setfield $tiddler=<<refreshTitle>> text="yes"/>
	</$list>
</$set>
\end

\define tag-picker-inner(actions,tagField:"tags")
\whitespace trim
<$vars
	newTagNameInputTiddlerQualified=<<qualify "$:/temp/NewTagName/input">>
	newTagNameSelectionTiddlerQualified=<<qualify "$:/temp/NewTagName/selected-item">>
	fallbackTarget={{$(palette)$##tag-background}}
	colourA={{$(palette)$##foreground}}
	colourB={{$(palette)$##background}}
>
	<$vars
		storeTitle={{{ [<newTagNameInputTiddler>!match[]] ~[<newTagNameInputTiddlerQualified>] }}}
		tagSelectionState={{{ [<newTagNameSelectionTiddler>!match[]] ~[<newTagNameSelectionTiddlerQualified>] }}}
	>
		<$vars
			refreshTitle=<<qualify "$:/temp/NewTagName/refresh">> 
			nonSystemTagsFilter="[tags[]!is[system]search:title<userInput>sort[]]"
			systemTagsFilter="[tags[]is[system]search:title<userInput>sort[]]"
		>
			<div class="tc-edit-add-tag">
				<div>
					<span class="tc-add-tag-name tc-small-gap-right">
						<$macrocall
							$name="keyboard-driven-input"
							tiddler=<<newTagNameTiddler>>
							storeTitle=<<storeTitle>>
							refreshTitle=<<refreshTitle>>
							selectionStateTitle=<<tagSelectionState>>
							inputAcceptActions="<$macrocall $name='add-tag-actions' actions=<<__actions__>> tagField=<<__tagField__>>/>"
							inputCancelActions=<<clear-tags-actions>>
							tag="input"
							placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}}
							focusPopup=<<qualify "$:/state/popup/tags-auto-complete">>
							class="tc-edit-texteditor tc-popup-handle"
							tabindex=<<tabIndex>>
							focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] ~[[false]] }}}
							filterMinLength={{$:/config/Tags/MinLength}}
							cancelPopups=<<cancelPopups>>
							configTiddlerFilter="[[$:/core/macros/tag-picker]]"
						/>
					</span>
					<$button popup=<<qualify "$:/state/popup/tags-auto-complete">> 
						class="tc-btn-invisible tc-btn-dropdown"
						tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}}
						aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}
					>
						{{$:/core/images/down-arrow}}
					</$button>
					<$reveal state=<<storeTitle>> type="nomatch" text="">
						<$button class="tc-btn-invisible tc-small-gap tc-btn-dropdown"
							tooltip={{$:/language/EditTemplate/Tags/ClearInput/Hint}}
							aria-label={{$:/language/EditTemplate/Tags/ClearInput/Caption}}
						>
							{{$:/core/images/close-button}}<<delete-tag-state-tiddlers>>
						</$button>
					</$reveal>
					<span class="tc-add-tag-button tc-small-gap-left">
						<$set name="tag" value={{{ [<newTagNameTiddler>get[text]] }}}>
							<$button set=<<newTagNameTiddler>> setTo="" class="">
								<$action-listops $tiddler=<<saveTiddler>> $field=<<__tagField__>> $subfilter="[<tag>trim[]]"/>
								<$transclude $variable="__actions__"/>
								<$set name="currentTiddlerCSSEscaped" value={{{ [<saveTiddler>escapecss[]] }}}>
									<<delete-tag-state-tiddlers>><$action-sendmessage $message="tm-focus-selector" $param=<<get-tagpicker-focus-selector>>/>
								</$set>
								{{$:/language/EditTemplate/Tags/Add/Button}}
							</$button>
						</$set>
					</span>
				</div>
				<div class="tc-block-dropdown-wrapper">
					<$reveal state=<<qualify "$:/state/popup/tags-auto-complete">> type="nomatch" text="" default="">
						<div class="tc-block-dropdown tc-block-tags-dropdown">
							<$set name="userInput" value={{{ [<storeTitle>get[text]] }}}>
								<$list
									filter="[<userInput>minlength{$:/config/Tags/MinLength}limit[1]]"
									emptyMessage="<div class='tc-search-results'
								>
									{{$:/language/Search/Search/TooShort}}</div>" variable="listItem">
									<$list filter=<<nonSystemTagsFilter>> variable="tag">
										<$list
											filter="[<tag>addsuffix[-primaryList]] -[<tagSelectionState>get[text]]" 
											emptyMessage="<$vars button-classes='tc-btn-invisible tc-tag-button-selected' actions=<<__actions__>> tagField=<<__tagField__>> currentTiddler=<<tag>>>{{||$:/core/ui/TagPickerTagTemplate}}</$vars>"
										>
											<$vars button-classes="tc-btn-invisible"
												actions=<<__actions__>> 
												tagField=<<__tagField__>>
												currentTiddler=<<tag>>
											>
												{{||$:/core/ui/TagPickerTagTemplate}}
											</$vars>
										</$list>
									</$list>
								</$list>
								<hr>
								<$list filter="[<userInput>minlength{$:/config/Tags/MinLength}limit[1]]" emptyMessage="<div class='tc-search-results'>
									{{$:/language/Search/Search/TooShort}}</div>" variable="listItem">
									<$list filter=<<systemTagsFilter>> variable="tag">
										<$list filter="[<tag>addsuffix[-secondaryList]] -[<tagSelectionState>get[text]]"
											emptyMessage="<$vars button-classes='tc-btn-invisible tc-tag-button-selected' actions=<<__actions__>> tagField=<<__tagField__>> currentTiddler=<<tag>>>{{||$:/core/ui/TagPickerTagTemplate}}</$vars>"
										>
											<$vars button-classes="tc-btn-invisible"
												actions=<<__actions__>>
												tagField=<<__tagField__>>
												currentTiddler=<<tag>>
											>
												{{||$:/core/ui/TagPickerTagTemplate}}
											</$vars>
										</$list>
									</$list>
								</$list>
							</$set>
						</div>
					</$reveal>
				</div>
			</div>
		</$vars>
	</$vars>
</$vars>
\end

\define tag-picker(actions,tagField:"tags")
\whitespace trim
<$vars saveTiddler=<<currentTiddler>> palette={{$:/palette}}>
	<$list
		filter="[<newTagNameTiddler>match[]]"
		emptyMessage="<$macrocall $name='tag-picker-inner' actions=<<__actions__>> tagField=<<__tagField__>>/>"
	>
		<$set name="newTagNameTiddler" value=<<qualify "$:/temp/NewTagName">>>
			<$macrocall $name="tag-picker-inner" actions=<<__actions__>> tagField=<<__tagField__>>/>
		</$set>
	</$list>
</$vars>
\end