"use client";

import ProfileAvatar from "@/components/main/ProfileAvatar";
import { User } from "@/types/types";
import React, { useState } from "react";
import ModelHeadRowTwo from "./ModelHeadRowTwo";
import ModelHeadRowThree from "./ModelHeadRowThree";
import useInfiniteScroll from "@/hooks/useInfiniteScroll";


interface ModelHeadProps {
  item2: {
    postsCount: number | undefined;
    allProjectsCount: number | undefined;
    successfulProjectsCount: number | undefined;
  };
  user: User;
}

function ModelHead({ user, item2 }: ModelHeadProps) {
  const {
    profile_image,
    user_name,
    expertise,
    sub_expertise,
    first_name,
    last_name,
    is_verified,
    user_score,
    rate,
    user_level,
    bio,
    user_type,
    _id,
    is_Register,
  } = user;
  

  const [filter] = useState<string>("درخواست");

  const { data } = useInfiniteScroll({
    endpoint: "/offers",
    queryKey: ["offers", filter],
    params: { status_filter: filter , id: user._id},
  });
  
  let AllRequests = 0;
  let SuccessfulRequests = 0;

  console.log(data);
  
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  data?.pages[0]?.offerbyid?.docs?.forEach((element: any) => {
    console.log(element.status);
  
    if (element.status === "accepted") {
      SuccessfulRequests += 1;
    }
  
    AllRequests += 1;
  });


  
 
  
  return (
    <div className="w-full">
      <div className="flex w-full items-center justify-between px-4 py-2">
        <div className="flex flex-col items-center text-xs md:text-sm ">
          {user_type == "user" && (
            <div className="flex text-[#3A59A9] font-semibold w-full">
              <p className=" line-clamp-2 max-sm:text-[8px] ml-3">
                {expertise}
                {sub_expertise ? (
                  <>
                    {" _ "}
                    {sub_expertise.length !== 0 && sub_expertise.length > 1 ? (
                      sub_expertise.map((subItem, index) => (
                        <span key={index}>
                          {subItem}
                          {index !== sub_expertise.length - 1 && " - "}
                        </span>
                      ))
                    ) : (
                      <h2>{sub_expertise}</h2>
                    )}
                  </>
                ) : (
                  ""
                )}
              </p>
            </div>
          )}
          <div className="flex gap-5 mt-2">
            {user_type == "user" && (
              <div className="font-semibold flex flex-col items-center max-sm:text-[10px]">
                <span>{item2?.postsCount}</span>
                <span>پست‌ها</span>
              </div>
            )}
            <div className="max-sm:text-[10px] font-semibold flex flex-col items-center text-[#0C8002]">
              <span>{SuccessfulRequests}</span>
              <span>درخواست های موفق</span>
            </div>
            <div className="max-sm:text-[10px] font-semibold flex flex-col items-center text-[#3A59A9]">
              <span>{AllRequests}</span>
              <span> کل درخواستها </span>
            </div>
          </div>
        </div>
        <ProfileAvatar
          src={profile_image}
          alt={user_name}
          size="md"
          rounded="xl"
          className="md:h-[120px] md:w-[120px]"
        />
      </div>
      <ModelHeadRowTwo
        first_name={first_name}
        last_name={last_name}
        is_verified={is_verified}
        is_Register={is_Register}
        user_name={user_name}
        user_score={user_score}
        rate={rate}
        user_id={_id}
      />
      <ModelHeadRowThree user_level={user_level} bio={bio} />
    </div>
  );
}

export default ModelHead;
