mutiny-web/src/components/ContactEditor.tsx

import { Match, Switch, createSignal } from "solid-js";
import { SmallHeader, TinyButton } from "~/components/layout";
import { Dialog } from "@kobalte/core";
import close from "~/assets/icons/close.svg";
import { SubmitHandler } from "@modular-forms/solid";
import { ContactForm } from "./ContactForm";
import { ContactFormValues } from "./ContactViewer";
import { DIALOG_CONTENT, DIALOG_POSITIONER } from "~/styles/dialogs";

export function ContactEditor(props: {
    createContact: (contact: ContactFormValues) => void;
    list?: boolean;
}) {
    const [isOpen, setIsOpen] = createSignal(false);

    // What we're all here for in the first place: returning a value
    const handleSubmit: SubmitHandler<ContactFormValues> = (
        c: ContactFormValues
    ) => {
        props.createContact(c);
        setIsOpen(false);
    };

    return (
        <Dialog.Root open={isOpen()}>
            <Switch>
                <Match when={props.list}>
                    <button
                        onClick={() => setIsOpen(true)}
                        class="flex flex-col items-center gap-2"
                    >
                        <div class="bg-neutral-500 flex-none h-16 w-16 rounded-full flex items-center justify-center text-4xl uppercase ">
                            <span class="leading-[4rem]">+</span>
                        </div>
                        <SmallHeader class="overflow-ellipsis">new</SmallHeader>
                    </button>
                </Match>
                <Match when={!props.list}>
                    <TinyButton onClick={() => setIsOpen(true)}>
                        + Add Contact
                    </TinyButton>
                </Match>
            </Switch>
            <Dialog.Portal>
                <div class={DIALOG_POSITIONER}>
                    <Dialog.Content
                        class={DIALOG_CONTENT}
                        onEscapeKeyDown={() => setIsOpen(false)}
                    >
                        <div class="w-full flex justify-end">
                            <button
                                tabindex="-1"
                                onClick={() => setIsOpen(false)}
                                class="hover:bg-white/10 rounded-lg active:bg-m-blue"
                            >
                                <img src={close} alt="Close" />
                            </button>
                        </div>
                        <ContactForm
                            title="New contact"
                            cta="Create contact"
                            handleSubmit={handleSubmit}
                        />
                    </Dialog.Content>
                </div>
            </Dialog.Portal>
        </Dialog.Root>
    );
}