import { Dialog } from "@kobalte/core";
import { JSX, createMemo } from "solid-js";
import { ModalCloseButton, SmallHeader } from "~/components/layout";
import { DIALOG_CONTENT, DIALOG_POSITIONER, OVERLAY } from "~/components/DetailsModal";
import { CopyButton } from "./ShareCard";

export function JsonModal(props: { title: string, open: boolean, plaintext?: string, data?: unknown, setOpen: (open: boolean) => void, children?: JSX.Element }) {
    const json = createMemo(() => props.plaintext ? props.plaintext : JSON.stringify(props.data, null, 2));

    return (
        <Dialog.Root open={props.open} onOpenChange={props.setOpen}>
            <Dialog.Portal>
                <Dialog.Overlay class={OVERLAY} />
                <div class={DIALOG_POSITIONER}>
                    <Dialog.Content class={DIALOG_CONTENT}>
                        <div class="flex justify-between mb-2 items-center">
                            <Dialog.Title>
                                <SmallHeader>
                                    {props.title}
                                </SmallHeader>
                            </Dialog.Title>
                            <Dialog.CloseButton>
                                <ModalCloseButton />
                            </Dialog.CloseButton>
                        </div>
                        <Dialog.Description class="flex flex-col gap-4 items-center">
                            <div class="bg-white/5 rounded-xl max-h-[50vh] overflow-y-scroll disable-scrollbars p-4">
                                <pre class="whitespace-pre-wrap break-all">
                                    {json()}
                                </pre>
                            </div>
                            {props.children}
                            <CopyButton title="Copy" text={json()} />
                        </Dialog.Description>
                    </Dialog.Content>
                </div>
            </Dialog.Portal>
        </Dialog.Root >
    )
}