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 { EmailInput } from "../../tremor/EmailInput";
import {
    Editor,
    EditorProvider,
    BtnBold,
    BtnBulletList,
    BtnClearFormatting,
    BtnItalic,
    BtnLink,
    BtnNumberedList,
    BtnRedo,
    BtnStrikeThrough,
    BtnUnderline,
    BtnUndo,
    HtmlButton,
    Separator,
    Toolbar,
} from "react-simple-wysiwyg";
import { AtSymbolIcon } from "@heroicons/react/24/outline";
import { Tabs, TabsList, TabsTrigger } from "../../tremor/Tabs";
import { useAutomationsModal } from "./useAutomationsModal";
import { Automation } from "@onvo-ai/js";


export const AutomationEmailCard: 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={AtSymbolIcon} />
                <Title className="onvo-text-sm onvo-flex-grow">Email 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">
                        Subject
                    </Text>
                    <Input
                        value={selectedAutomation?.email_subject}
                        onChange={(e) => updateSelectedAutomation({ email_subject: e.target.value })}
                        placeholder="Automated email from Onvo AI" />
                </div>
                <div className="onvo-flex onvo-flex-row onvo-items-center onvo-mt-2">
                    <Text className="onvo-w-20 onvo-flex-shrink-0 onvo-text-sm onvo-font-semibold">
                        To
                    </Text>
                    <Input value={selectedAutomation?.email_to || ""} disabled />
                </div>
                <div className="onvo-flex onvo-flex-row onvo-items-center onvo-mt-2">
                    <Text className="onvo-w-20 onvo-flex-shrink-0 onvo-text-sm onvo-font-semibold">
                        CC
                    </Text>
                    <EmailInput placeholder="Email IDs" value={selectedAutomation?.email_cc || []} onValueChange={(val) => {
                        updateSelectedAutomation({ email_cc: val })
                    }} />
                </div>

                <div className="onvo-flex onvo-flex-row onvo-items-center onvo-mt-2">
                    <div className="onvo-min-h-48 onvo-w-full onvo-max-w-full onvo-prose onvo-prose-slate onvo-prose-sm dark:onvo-prose-invert">
                        <EditorProvider>
                            <Editor
                                containerProps={{ style: { minHeight: 192 } }}
                                value={selectedAutomation?.email_body}
                                onChange={(e) => updateSelectedAutomation({ email_body: e.target.value })}
                            >
                                <Toolbar>
                                    <BtnUndo />
                                    <BtnRedo />
                                    <Separator />
                                    <BtnBold />
                                    <BtnItalic />
                                    <BtnUnderline />
                                    <BtnStrikeThrough />
                                    <Separator />
                                    <BtnNumberedList />
                                    <BtnBulletList />
                                    <Separator />
                                    <BtnLink />
                                    <BtnClearFormatting />
                                    <HtmlButton />
                                </Toolbar>
                            </Editor>
                        </EditorProvider>
                    </div>
                </div>

            </div>
        </Card>
    )
}