import { For, createSignal, Accessor, Setter } from 'solid-js';
interface Props<T>{
filter: Accessor<string>;
setFilter: Setter<string>;
filterPlaceholder: string;
filteredChoices: Accessor<T[]>;
choiceToString: (t: T) => string;
getChoiceId: (t: T) => string;
userChoices: Accessor<Record<string, true>>;
setUserChoices: Setter<Record<string, true>>;
getChoiceById: (id: string) => T;
}
export default function SelectMany<T>(props: Props<T>) {
return (
<div>
<div>choices</div>
<input placeholder={props.filterPlaceholder}
value={props.filter()}
onInput={(e) => {
props.setFilter(e.target.value);
}}
/>
<ul>
<For each={props.filteredChoices()}>
{(choice) => (
<div>
<span>{props.choiceToString(choice)}</span>
<button onClick={
(e) => {
e.preventDefault();
props.setUserChoices(
(prev) => ({...prev, [props.getChoiceId(choice)]: true})
)
}
}>
Add
</button>
</div>
)}
</For>
</ul>
<div>chosen</div>
<ul>
<For each={Object.keys(props.userChoices())}>
{(id) => {
const choice = props.getChoiceById(id)
return (
<div>
<span>{props.choiceToString(choice)}</span>
<button onClick={(e) => {
e.preventDefault();
props.setUserChoices((prev) => {
const newUserChoices = {...prev}
delete prev[id]
return newUserChoices;
})
}}>Remove</button>
</div>
)
}}
</For>
</ul>
</div>
)
}