import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import useSWR from "swr";
// ui
import { useTranslation } from "@buzzwaretech/i18n";
import { Avatar } from "@buzzwaretech/propel/avatar";
import { EmptyStateCompact } from "@buzzwaretech/propel/empty-state";
import { Card, Loader } from "@buzzwaretech/ui";
import { calculateTimeAgo, getFileURL } from "@buzzwaretech/utils";
// components
import { ActivityMessage, IssueLink } from "@/components/core/activity";
import type { TIssueActivity, IIssueActivity } from "@buzzwaretech/types";
// constants
import { USER_PROFILE_ACTIVITY } from "@/constants/fetch-keys";
// helpers
// hooks
import { useUser } from "@/hooks/store/user";
// services
import { UserService } from "@/services/user.service";

const userService = new UserService();

export const ProfileActivity = observer(function ProfileActivity() {
  const { workspaceSlug, userId } = useParams();
  // store hooks
  const { data: currentUser } = useUser();
  const { t } = useTranslation();

  const { data: userProfileActivity } = useSWR(
    workspaceSlug && userId
      ? USER_PROFILE_ACTIVITY(workspaceSlug.toString(), userId.toString(), {})
      : null,
    workspaceSlug && userId
      ? () =>
          userService.getUserProfileActivity(
            workspaceSlug.toString(),
            userId.toString(),
            {
              per_page: 10,
            },
          )
      : null,
  );

  return (
    <div className="space-y-2">
      <h3 className="text-16 font-medium">
        {t("profile.stats.recent_activity.title")}
      </h3>
      <Card>
        {userProfileActivity ? (
          userProfileActivity.results.length > 0 ? (
            <div className="space-y-5">
              {userProfileActivity.results.map((activity: TIssueActivity) => (
                <div key={activity.id} className="flex gap-3">
                  <Avatar
                    name={activity.actor_detail?.display_name}
                    src={getFileURL(activity.actor_detail?.avatar_url)}
                    size="base"
                    shape="square"
                  />
                  <div className="-mt-1 w-4/5 break-words">
                    <p className="inline text-13 text-secondary">
                      <span className="font-medium text-primary">
                        {currentUser?.id === activity.actor_detail?.id
                          ? "You"
                          : activity.actor_detail?.display_name}{" "}
                      </span>
                      {activity.field ? (
                        <ActivityMessage activity={{ ...activity, created_at: new Date(activity.created_at) } as unknown as IIssueActivity} showIssue />
                      ) : (
                        <span>
                          created <IssueLink activity={{ ...activity, created_at: new Date(activity.created_at) } as unknown as IIssueActivity} />
                        </span>
                      )}
                    </p>
                    <p className="text-11 whitespace-nowrap text-secondary">
                      {calculateTimeAgo(activity.created_at)}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <EmptyStateCompact
              title={t("no_data_yet")}
              assetKey="unknown"
              assetClassName="size-20"
            />
          )
        ) : (
          <Loader className="space-y-5">
            <Loader.Item height="40px" />
            <Loader.Item height="40px" />
            <Loader.Item height="40px" />
            <Loader.Item height="40px" />
            <Loader.Item height="40px" />
          </Loader>
        )}
      </Card>
    </div>
  );
});