From 3eb2e0bdb9e31125c36f04ce25e7c0bf7ea2ef60 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Wed, 26 Apr 2023 10:55:47 -0500
Subject: [PATCH] tag editor without tag buttons

---
 src/components/TagEditor.tsx | 58 ++++++++++++------------------------
 src/styles/solid-select.css  |  4 +--
 2 files changed, 21 insertions(+), 41 deletions(-)

diff --git a/src/components/TagEditor.tsx b/src/components/TagEditor.tsx
index 284ebba..bc49359 100644
--- a/src/components/TagEditor.tsx
+++ b/src/components/TagEditor.tsx
@@ -1,83 +1,63 @@
 import { Select, createOptions } from "@thisbeyond/solid-select";
-import { For, createSignal } from "solid-js";
 import "~/styles/solid-select.css"
 import { SmallHeader } from "./layout";
 
-
 // take two arrays, subtract the second from the first, then return the first
 function subtract<T>(a: T[], b: T[]) {
     const set = new Set(b);
     return a.filter(x => !set.has(x));
 };
 
-// combine two arrays and keep only the items that are unique
-function combineUnique<T>(a: T[], b: T[]) {
-    const set = new Set([...a, ...b]);
-    return [...set];
-};
-
 // simple math.random based id generator
 const createUniqueId = () => Math.random().toString(36).substr(2, 9);
 
-type Contact = {
+export type TagItem = {
     id: string;
     name: string;
+    kind: "text" | "contact";
 }
 
-const fakeContacts: Contact[] = [
-    { id: createUniqueId(), name: "👤 Alice" },
-    { id: createUniqueId(), name: "👤 Tony" },
-    { id: createUniqueId(), name: "👤 @benthecarman" },
-    { id: createUniqueId(), name: "👀 Uknown" }
-]
-
 const createValue = (name: string) => {
-    return { id: createUniqueId(), name };
+    return { id: createUniqueId(), name, kind: "text" };
 };
 
-export function TagEditor() {
-    const candidates = [...fakeContacts];
+export function TagEditor(props: { title: string, values: TagItem[], setValues: (values: TagItem[]) => void, selectedValues: TagItem[], setSelectedValues: (values: TagItem[]) => void }) {
+    const onChange = (selected: TagItem[]) => {
+        props.setSelectedValues(selected);
 
-    const [values, setValues] = createSignal(candidates);
-    const [selectedValues, setSelectedValues] = createSignal<Contact[]>([]);
-
-    const onChange = (selected: Contact[]) => {
-        setSelectedValues(selected);
+        console.log(selected)
 
         const lastValue = selected[selected.length - 1];
-        if (lastValue && !values().includes(lastValue)) {
-            setValues([...values(), lastValue]);
+        if (lastValue && !props.values.includes(lastValue)) {
+            props.setValues([...props.values, lastValue]);
         }
     };
 
-    const props = createOptions(values, {
+    const selectProps = createOptions(props.values, {
         key: "name",
-        disable: (value) => selectedValues().includes(value),
+        disable: (value) => props.selectedValues.includes(value),
         filterable: true, // Default
         createable: createValue,
     });
 
     return (
         <div class="flex flex-col gap-2 flex-grow flex-shrink flex-1" >
-            <SmallHeader>Tag the origin</SmallHeader>
+            <SmallHeader>{props.title}</SmallHeader>
             <Select
                 multiple
                 onChange={onChange}
                 placeholder="Where's it coming from?"
-                {...props}
+                {...selectProps}
             />
-            <div class="flex gap-2 flex-wrap">
-                <For each={subtract(fakeContacts, selectedValues())}>
+
+            {/* TODO: blocked on https://github.com/thisbeyond/solid-select/issues/39 */}
+            {/* <div class="flex gap-2 flex-wrap">
+                <For each={subtract(props.values, props.selectedValues).slice(0, 3)}>
                     {(contact) => (
-                        <div onClick={() => onChange([...selectedValues(), contact])} class="bg-m-blue px-1 rounded cursor-pointer hover:outline-white hover:outline-1">+ {contact.name}</div>
+                        <div onClick={() => onChange([...props.selectedValues, contact])} class="bg-m-blue/50 px-1 py-[0.5] rounded cursor-pointer hover:outline-white hover:outline-1">{contact.name}</div>
                     )}
                 </For>
-            </div>
-            {/* <div>
-                <pre>{JSON.stringify(selectedValues(), null, 2)}</pre>
-            </div>
-            <div>
-                <pre>{JSON.stringify(values(), null, 2)}</pre>
+                <button class="bg-black border border-white px-1 py-[0.5] rounded cursor-pointer hover:outline-white hover:outline-1">+ Add Contact</button>
             </div> */}
         </div >
     )
diff --git a/src/styles/solid-select.css b/src/styles/solid-select.css
index 85bc200..479f9e2 100644
--- a/src/styles/solid-select.css
+++ b/src/styles/solid-select.css
@@ -54,13 +54,13 @@
 }
 
 .solid-select-option > mark {
-  @apply underline;
+  @apply underline bg-white/10 text-white;
 }
 .solid-select-option {
   @apply cursor-default select-none p-1 hover:bg-neutral-800 rounded;
 }
 .solid-select-option[data-disabled="true"] {
-  @apply pointer-events-none text-neutral-500;
+  @apply pointer-events-none opacity-50;
 }
 .solid-select-list-placeholder {
   @apply cursor-default select-none;