"use client";

import { Post } from "@/types/types";
import React, { useState } from "react";
import ReportModal from "../../main/ReportModal";
import CommentsModal from "./CommentsModal";
import ModelDetailModal from "../ModelDetailModal";
import ModelServiceModal from "../ModelServiceModal";
import { useUserById } from "@/hooks/getUserById";
import SharePostModal from "@/components/main/SharePostModal";
import SendPostModal from "@/components/posts/SendPostModal";
import { SocialStatButton, SocialIconButton } from "@/components/ui/SocialStatButton";
import {
  POST_SOCIAL_ICONS,
  PostSocialIcon,
  usePostSocialState,
} from "@/hooks/usePostSocialActions";
import { useTranslation } from "react-i18next";

function MainModelCardActions({ postData }: { postData: Post }) {
  const { _id: postId, user_id } = postData;

  const { t } = useTranslation("common");
  const user = useUserById(user_id);
  const expertise = user?.expertise;
  const hair_color = user?.hair_color;
  const eye_color = user?.eye_color;
  const height = user?.height;
  const size = user?.size;
  const weight = user?.weight;
  const services = user?.services;

  const [showReportModal, setShowReportModal] = useState<boolean>(false);
  const [showCommentsModal, setShowCommentsModal] = useState<boolean>(false);
  const [showShareModal, setShowShareModal] = useState(false);
  const [showSendModal, setShowSendModal] = useState(false);
  const [showServicesModal, setShowServicesModal] = useState<boolean>(false);

  const social = usePostSocialState(postData);
  const iconSize = "sm" as const;

  return (
    <>
      {showReportModal && (
        <ReportModal
          isOpen={showReportModal}
          onClose={() => setShowReportModal(false)}
        />
      )}
      {showCommentsModal && (
        <CommentsModal
          isOpen={showCommentsModal}
          onClose={() => setShowCommentsModal(false)}
          userId={user_id}
          postId={postId}
        />
      )}
      <SharePostModal
        open={showShareModal}
        onClose={() => setShowShareModal(false)}
        url={social.shareUrl}
      />
      {social.currentUserId && (
        <SendPostModal
          open={showSendModal}
          onClose={() => setShowSendModal(false)}
          postData={postData}
          currentUserId={social.currentUserId}
          onSent={(count) => social.setSendsCount(count)}
        />
      )}
      {showServicesModal &&
        (expertise === "مدلینگ" ? (
          <ModelDetailModal
            hairColor={hair_color}
            eyeColor={eye_color}
            height={height}
            size={size}
            weight={weight}
            isOpen={showServicesModal}
            onClose={() => setShowServicesModal(false)}
            isMain
            userId={user_id}
          />
        ) : (
          <ModelServiceModal
            services={services}
            isOpen={showServicesModal}
            onClose={() => setShowServicesModal(false)}
            userId={user_id}
          />
        ))}
      <div className="mt-2 flex w-full flex-row items-center justify-between px-6 sm:px-8">
        <SocialIconButton
          layout="horizontal"
          onClick={() => setShowServicesModal(true)}
          aria-label={t("models.actions.collaborationAria")}
          icon={
            <PostSocialIcon
              {...POST_SOCIAL_ICONS.collaboration(iconSize)}
            />
          }
        />
        {!social.isOwnPost && (
          <SocialIconButton
            layout="horizontal"
            onClick={social.toggleFollow}
            aria-label={social.following ? t("models.actions.unfollow") : t("models.actions.follow")}
            icon={
              <PostSocialIcon
                {...POST_SOCIAL_ICONS.follow(social.following, iconSize)}
              />
            }
          />
        )}
        <SocialStatButton
          layout="horizontal"
          count={social.sendsCount}
          onClick={() => setShowSendModal(true)}
          aria-label={t("models.actions.sendAria")}
          icon={<PostSocialIcon {...POST_SOCIAL_ICONS.send(iconSize)} />}
        />
        <SocialStatButton
          layout="horizontal"
          count={0}
          showZero={false}
          onClick={() => {
            social.trackShare();
            if (social.shareUrl) setShowShareModal(true);
          }}
          aria-label={t("models.actions.shareAria")}
          icon={
            <PostSocialIcon {...POST_SOCIAL_ICONS.share(iconSize)} />
          }
        />
        <SocialIconButton
          layout="horizontal"
          onClick={social.toggleSave}
          aria-label={social.saved ? t("models.actions.favoriteRemoveAria") : t("models.actions.favoriteAria")}
          icon={
            <PostSocialIcon
              {...POST_SOCIAL_ICONS.save(social.saved, iconSize)}
            />
          }
        />
        <SocialStatButton
          layout="horizontal"
          count={social.commentCount}
          onClick={() => setShowCommentsModal(!showCommentsModal)}
          aria-label={t("models.actions.commentAria")}
          icon={
            <PostSocialIcon {...POST_SOCIAL_ICONS.comment(iconSize)} />
          }
        />
        <SocialStatButton
          layout="horizontal"
          likeCount={social.likesCountState}
          onClick={social.toggleLike}
          aria-label={t("models.actions.likeAria")}
          icon={
            <PostSocialIcon
              {...POST_SOCIAL_ICONS.like(social.liked, iconSize)}
            />
          }
        />
      </div>
    </>
  );
}

export default MainModelCardActions;
