import React from "react";
import { twMerge } from "tailwind-merge";
import { Card } from "../../tremor/Card";
import { Button } from "../../tremor/Button";
import { BoltIcon } from "@heroicons/react/24/solid";
import { Empty } from "../Empty";

import { AutomationHeader } from "./AutomationHeader";
import { useAutomationsModal } from "./useAutomationsModal";
import { AutomationSidebar } from "./AutomationsSidebar";
import { AutomationEditor } from "./AutomationEditor";

import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
import { useBackend } from "../../layouts";
import { useDashboard } from "../../layouts/Dashboard/useDashboard";
import { toast } from "sonner";

dayjs.extend(relativeTime);
dayjs.extend(utc);
dayjs.extend(timezone);

export const AutomationsModal: React.FC<{
}> = () => {
    const { open, setOpen, selectedAutomation, createAutomation, automations } = useAutomationsModal();
    const { backend, account, embedUser } = useBackend();
    const { dashboard } = useDashboard();



    return (<>
        <dialog open={open}>
            <div
                className={twMerge(
                    "onvo-@container/widgetmodal onvo-h-full onvo-animate-dialogOpen onvo-w-full onvo-z-[9999] onvo-fixed onvo-left-0 onvo-top-0 onvo-foreground-color"
                )}
            >
                <AutomationHeader onClose={() => setOpen(false)} />

                <div className="onvo-relative onvo-flex onvo-flex-grow onvo-h-[calc(100%-52px)]  onvo-w-full onvo-flex-col-reverse @xl/widgetmodal:onvo-flex-row">

                    <PanelGroup autoSaveId="automation-sidebar" direction="horizontal">
                        <Panel defaultSize={15} minSize={10}>
                            <AutomationSidebar />
                        </Panel>
                        <PanelResizeHandle className="onvo-w-[1px] onvo-border-0 onvo-bg-black/10 dark:onvo-bg-white/10 hover:onvo-bg-black/50 dark:hover:onvo-bg-white/50 active:onvo-bg-black/50 dark:active:onvo-bg-white/50" />
                        <Panel minSize={50}>
                            {selectedAutomation ? (
                                <AutomationEditor />) : (<div className="onvo-relative onvo-flex onvo-flex-grow onvo-h-full onvo-w-full onvo-flex-col-reverse @xl/widgetmodal:onvo-flex-row">
                                    <div className="onvo-background-color onvo-flex-grow dark:onvo-bg-dot-white/[0.2] onvo-p-8 onvo-bg-dot-black/[0.2] onvo-flex onvo-flex-col onvo-justify-start onvo-items-center">
                                        <Card className="onvo-foreground-color onvo-max-w-screen-md">
                                            <Empty title="No automations created yet" direction="column" subtitle="Automations let you send out your dashboards as a report as an email at a specified schedule" icon={<BoltIcon className="onvo-size-8" />} button={<Button onClick={() => {
                                                if (!backend || !dashboard) return;
                                                createAutomation(backend, dashboard, automations, account, embedUser)
                                            }}>Create your first automation</Button>} />
                                        </Card>
                                    </div>
                                </div>
                            )}
                        </Panel>
                    </PanelGroup>

                </div>
            </div>
        </dialog >
    </>)
}