From fdb9dac075690d32d477dfbe99a9f728e06431d1 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 19 Apr 2024 17:16:21 -0700
Subject: [PATCH] refactor(components): Refactor CopyInput

Re-use Label and Copy components to reduce duplicate code.
---
 src/lib/components/copyInput.svelte | 74 +++++++++++++++++------------
 1 file changed, 43 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/copyInput.svelte b/src/lib/components/copyInput.svelte
index b19d9b002..3ff70378d 100644
--- a/src/lib/components/copyInput.svelte
+++ b/src/lib/components/copyInput.svelte
@@ -1,46 +1,58 @@
 <script lang="ts">
     import { tooltip } from '$lib/actions/tooltip';
-    import { copy } from '$lib/helpers/copy';
-
-    import { addNotification } from '$lib/stores/notifications';
+    import { Label } from '$lib/elements/forms';
+    import type { SvelteComponent } from 'svelte';
+    import { Copy, Drop } from '.';
 
     export let value: string;
     export let label: string = null;
+    export let optionalText: string | undefined = undefined;
     export let showLabel = false;
+    export let labelTooltip: string = null;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
+    export let appendTo: Parameters<typeof tooltip>['1']['appendTo'] = undefined;
 
-    let content = 'Click to copy';
-
-    const handleCopy = async () => {
-        const success = await copy(value);
-
-        if (success) {
-            content = 'Copied';
-        } else {
-            addNotification({
-                message: 'Unable to copy to clipboard',
-                type: 'error'
-            });
-        }
-    };
+    let show = false;
 </script>
 
 <div>
-    <label class:u-hide={!showLabel} class="label" for={label}>{label}</label>
+    {#if label}
+        <Label tooltip={labelTooltip} {optionalText} hide={!showLabel} for={label}>
+            {label}{#if popover}
+                <Drop isPopover bind:show display="inline-block">
+                    <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+                    &nbsp;<button
+                        type="button"
+                        on:click={() => (show = !show)}
+                        class="tooltip"
+                        aria-label="input tooltip">
+                        <span
+                            class="icon-info"
+                            aria-hidden="true"
+                            style:font-size="var(--icon-size-small)" />
+                    </button>
+                    <svelte:fragment slot="list">
+                        <div
+                            class="dropped card u-max-width-250"
+                            style:--p-card-padding=".75rem"
+                            style:--card-border-radius="var(--border-radius-small)"
+                            style:box-shadow="var(--shadow-large)">
+                            <svelte:component this={popover} {...popoverProps} />
+                        </div>
+                    </svelte:fragment>
+                </Drop>
+            {/if}
+        </Label>
+    {/if}
     <div class="input-text-wrapper" style="--amount-of-buttons:1">
-        <input {value} id={label} type="text" class="input-text" readonly />
+        <input id={label} type="text" {value} readonly />
         <div class="options-list">
-            <button
-                type="button"
-                class="options-list-button"
-                aria-label="Click to copy."
-                on:click={handleCopy}
-                on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
-                use:tooltip={{
-                    content,
-                    hideOnClick: false
-                }}>
-                <span class="icon-duplicate" aria-hidden="true" />
-            </button>
+            {#key appendTo}
+                <Copy {value} {appendTo}>
+                    <span class="icon-duplicate" aria-hidden="true" />
+                </Copy>
+            {/key}
         </div>
     </div>
 </div>