import { useQuery } from "@tanstack/react-query";
import { __ } from "@wordpress/i18n";
import { useParams } from "@tanstack/react-router";
import { getGroupQueryOptions } from "@/shared/ploogins-groups/query-options";
import { useEffect } from "@wordpress/element";
import usePluginsViewStore from "@/stores/pluginsViewStore";
import PluginsView from "../PluginsView";

const Group = () => {

    const { uuid: groupUUID } = useParams({ strict: false })

    const { data: group, isPending } = useQuery(getGroupQueryOptions(groupUUID ?? ''))

    const { setData, setIsPending } = usePluginsViewStore()

    useEffect(() => {
        setData(group?.items ?? [])
    }, [group])

    useEffect(() => {
        setIsPending(isPending)
    }, [isPending])

    return (
        <div className="h-full flex flex-col">

            <header style={{ padding: '12px 16px', borderBottom: '1px solid #f0f0f0' }} className="sticky top-0 bg-white flex justify-between items-center">
                <div className="flex items-center gap-2">
                    {
                        group?.icon && (
                            <img src={group?.icon} alt={group?.name} className="w-8 h-8 object-contain rounded-lg" />
                        )
                    }

                    <div>
                        <h2 className="!text-lg !font-medium !py-0 !my-0">{group?.name}</h2>
                        <p className="!text-xs !text-neutral-500 !my-0 !py-0">{group?.service_name}</p>
                    </div>
                </div>

                <div className="flex items-center gap-2">
                    <span className="!text-sm !font-normal !my-0 !py-0">{group?.items?.length} {__('plugins', 'ploogins-ai-assistant')}</span>
                </div>
            </header>

            <PluginsView />
        </div>
    );
}

export default Group