import React from "react";
import { Icon } from "../../tremor/Icon";
import { Text, Title } from "../../tremor/Text";
import { Card } from "../../tremor/Card";
import { Input } from "../../tremor/Input";
import { CodeBracketIcon } from "@heroicons/react/24/outline";
import { Tabs, TabsList, TabsTrigger } from "../../tremor/Tabs";
import { useAutomationsModal } from "./useAutomationsModal";
import { Automation } from "@onvo-ai/js";


export const AutomationWebhookCard: React.FC<{}> = ({ }) => {

    const { selectedAutomation, setSelectedAutomation } = useAutomationsModal();

    const updateSelectedAutomation = (update: Partial<Automation>) => {
        // @ts-ignore
        setSelectedAutomation({
            ...selectedAutomation, ...update
        });
    }

    return (
        <Card className="onvo-foreground-color onvo-max-w-screen-md !onvo-p-0">
            <div className="onvo-background-color onvo-px-4 onvo-py-2 onvo-border-solid onvo-border-b onvo-rounded-t-2xl onvo-border-black/10 dark:onvo-border-white/10 onvo-flex onvo-flex-row onvo-items-center onvo-gap-2">
                <Icon variant="shadow" size="xs" icon={CodeBracketIcon} />
                <Title className="onvo-text-sm onvo-flex-grow">Webhook configuration</Title>
                <Tabs defaultValue="static" value={selectedAutomation?.method || "email"} onValueChange={value => setSelectedAutomation({ method: value })}>
                    <TabsList variant="solid">
                        <TabsTrigger value="email">Email</TabsTrigger>
                        <TabsTrigger value="webhook">Webhook</TabsTrigger>
                    </TabsList>
                </Tabs>
            </div>
            <div className="onvo-p-4">
                <div className="onvo-flex onvo-flex-row onvo-items-center">
                    <Text className="onvo-w-20 onvo-flex-shrink-0 onvo-text-sm onvo-font-semibold">
                        URL
                    </Text>
                    <Input
                        value={selectedAutomation?.webhook_url || undefined}
                        onChange={(e) => updateSelectedAutomation({ webhook_url: e.target.value })}
                        placeholder="https://example.com/webhook" />
                </div>

            </div>
        </Card>
    )
}