import { getActivityQueryOptions } from "@/shared/plugin-activity/query-options";
import usePluginSelectedStore from "@/stores/pluginSelectedStore";
import { useQuery } from "@tanstack/react-query";
import { Card, CardBody, CardHeader, Spinner, Icon } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { seen, trash, plugins, closeSmall, download } from "@wordpress/icons";

const Activity = () => {

    const { plugin } = usePluginSelectedStore()
    const { data, isPending } = useQuery(getActivityQueryOptions(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">{__('Activity', 'ploogins-ai-assistant')}</span>
            </CardHeader>

            <CardBody className="!max-h-[300px] !overflow-y-auto">

                <div className="space-y-4">

                    <div className="bg-white space-y-4">
                        {data?.map((activity) => (
                            <div key={activity.id}  className="flex flex-wrap justify-between items-center gap-2 !text-neutral-400">
                                <div className="flex items-center gap-1">
                                    {activity.activity_type === 'view' && <Icon icon={seen} size={15} />}
                                    {activity.activity_type === 'install' && <Icon icon={download} size={15} />}
                                    {activity.activity_type === 'delete' && <Icon icon={trash} size={15} />}
                                    {activity.activity_type === 'activate' && <Icon icon={plugins} size={15} />}
                                    {activity.activity_type === 'deactivate' && <Icon icon={closeSmall} size={15} />}
                                    <p className="!text-xs !font-normal !my-0 !py-0 !text-neutral-500">{activity.activity_text}</p>
                                </div>
                                <div className="flex items-center gap-2">
                                    <time dateTime={activity.activity_display_date} className="!text-xs !font-normal !my-0 !py-0">{activity.activity_display_date}</time>
                                    <span className="!text-xs !font-normal !my-0 !py-0">•</span>
                                    <div className="flex items-center gap-1">
                                        {
                                            activity.activity_user_avatar && (
                                                <img src={activity.activity_user_avatar} alt={activity.activity_user_display_name} className="!w-4 !h-4 !rounded-full" />
                                            )
                                        }
                                        <span className="!text-xs !font-normal !my-0 !py-0">{activity.activity_user_display_name}</span>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

            </CardBody>
        </Card>
    )
}

export default Activity;