import { useForm } from "@tanstack/react-form"
import { Button, Card, CardHeader, CardBody, BaseControl, TextareaControl, Spinner } from "@wordpress/components"
import { __ } from "@wordpress/i18n"
import { useMutation, useQuery } from "@tanstack/react-query"
import usePluginSelectedStore from "@/stores/pluginSelectedStore"
import { getCommentsQueryOptions } from "@/shared/plugin-comments/query-options"
import { addCommentMutationOptions } from "@/shared/plugin-comments/mutation-options"
import NoteItem from "../NoteItem"

const Notes = () => {

    const { plugin } = usePluginSelectedStore()
    const { mutate: addComment, isPending: isAddingComment } = useMutation(addCommentMutationOptions())

    const form = useForm({
        defaultValues: {
            comment_content: '',
        },
        onSubmit: (values) => {
            addComment({
                plugin_slug: plugin?.slug ?? '',
                comment_content: values.value.comment_content,
            })
            form.reset()
        },
    })

    const { data: comments, isPending } = useQuery(getCommentsQueryOptions(plugin?.slug ?? ''))

    if (isPending) {
        return (
            <div className="flex items-center justify-center h-full">
                <Spinner />
            </div>
        )
    }

    return (
        <Card>
            <CardHeader className="!py-3">
                <span className="!text-sm !font-medium !my-0 !py-0">{__('Notes', 'ploogins-ai-assistant')}</span>
            </CardHeader>

            <CardBody className="flex flex-col gap-2">

                <div className="space-y-4 !max-h-[400px] !overflow-y-auto">

                    {
                        isAddingComment && (
                            <div className="flex items-center justify-center h-full">
                                <Spinner />
                            </div>
                        )
                    }

                    {comments?.map((comment) => (
                        <NoteItem key={comment.id} comment={comment} />
                    ))}

                </div>

                <div className="flex-1 space-y-4">
                    {
                        (comments && comments?.length > 0) && <hr />
                    }                    

                    <form.Field
                        name="comment_content"
                        children={(field) => (
                            <BaseControl
                                label={''}
                            >
                                <TextareaControl
                                    value={field.state.value}
                                    onChange={(value) => field.handleChange(value as string)}
                                    placeholder={__('Add your notes here...', 'ploogins-ai-assistant')}
                                    rows={1}
                                />
                                {field.state.meta.errors.length > 0 && (
                                    <em>{field.state.meta.errors.join(',')}</em>
                                )}
                            </BaseControl>
                        )}
                    />
                    

                    <div className="flex items-center gap-2 justify-end">
                        <Button variant="primary" onClick={() => {
                            form.handleSubmit()
                        }}>
                            {__('Add Note', 'ploogins-ai-assistant')}
                        </Button>
                    </div>
                </div>

            </CardBody>
        </Card>
    )
}

export default Notes;