import React, { useEffect } from "react";
import { BlocksField, Select, TextArea } from "tinacms";
import { useEditBlock, useGenerateBlock, useGenerateStructure } from "./use-ai";
const Button = ({ type, isError, isLoading, disabled, children, ...props }) => {
    return (<button type={type} {...props} disabled={disabled || isLoading} className={`p-2 bg-blue-400 rounded-md text-white text-sm ${props.className} ${isLoading ? "opacity-50" : ""} ${isError ? "bg-red-400" : ""}}`}>
      {isLoading ? "Loading..." : children}
    </button>);
};
export const BlocksInput = (props) => {
    const [edit, setEdit] = React.useState("generate");
    console.log(props);
    return (<div className="flex flex-col gap-3 z-[9999999] relative">
      <div className="flex flex-col gap-2">
        <p>AI</p>
        {props.input.value && (<Select input={{ value: edit, onChange: (e) => setEdit(e.target.value) }} name="data" options={[
                { value: "generate", label: "Generate" },
                ...(props.input?.value?.map((v, i) => ({ value: i.toString(), label: `Edit ${i + 1}. ${v._template}` })) || []),
            ]}/>)}

        {edit === "generate" ? <Generate {...props}/> : <Edit {...props} i={Number(edit)}/>}
      </div>
      <BlocksField {...props}/>
    </div>);
};
export const Generate = (props) => {
    const [message, setMessage] = React.useState("");
    const [blocks, setBlocks] = React.useState(props.input.value);
    const { result, mutate, isLoading, isError } = useGenerateStructure();
    useEffect(() => {
        props.input.onChange(blocks);
    }, [blocks]);
    return (<>
      {result?.blocks?.map((b, i) => (<Item key={i} {...b} onChange={(b) => setBlocks((v) => [...v, b])}/>))}
      <TextArea value={message} onChange={(e) => setMessage(e.target.value)}/>
      <Button isLoading={isLoading} isError={isError} onClick={() => mutate(message)}>
        Generate
      </Button>
    </>);
};
const Item = ({ name, prompt, onChange }) => {
    const { mutate, isLoading, isError } = useGenerateBlock((b) => onChange(b));
    useEffect(() => {
        mutate({ name, prompt });
    }, []);
    return (<div className="flex justify-between items-center">
      <p>{name}</p>
      <Button isError={isError} isLoading={isLoading} className="p-2 rounded-md" onClick={() => mutate({ name, prompt })}>
        Generate
      </Button>
    </div>);
};
export const Edit = (props) => {
    const [message, setMessage] = React.useState("");
    const { mutate, isLoading, isError } = useEditBlock((b) => props.input.onChange(props.input?.value?.map((v, j) => (j === props.i ? b : v))));
    const block = props.input.value[props.i];
    return (<>
      <TextArea value={message} onChange={(e) => setMessage(e.target.value)}/>
      <Button isError={isError} isLoading={isLoading} onClick={() => mutate({ block, name: block._template, message })} className="p-2 bg-blue-400 rounded-md text-white">
        Generate
      </Button>
    </>);
};