"use client";

import React, { useState } from "react";
import RoundedDiv from "@/components/elements/RoundedDiv";
import { User } from "@/types/types";
import RoundedButton from "@/components/elements/RoundedButton";
import Link from "next/link";
import ModelDetailModal from "@/components/models/ModelDetailModal";
import ModelServiceModal from "@/components/models/ModelServiceModal";
import Image from "next/image";
import ShowMap from "@/components/main/ShowMap";
import { isModelExpertise } from "@/lib/isModelExpertise";
import AccountActionModals from "./AccountActionModals";
import { useTranslation } from "react-i18next";

interface ProfileProfileContentProps {
  user: User | undefined;
  onRefresh?: () => void;
}

function ProfileContent({ user, onRefresh }: ProfileProfileContentProps) {
  const { t } = useTranslation("common");
  const [showModelDetailModal, setShowModelDetailModal] =
    useState<boolean>(false);
  const [actionKind, setActionKind] = useState<"deactivate" | "delete" | null>(
    null
  );

  return (
    <div className="w-full py-2 text-xs font-semibold md:text-sm">
      <AccountActionModals
        kind={actionKind}
        username={user?.user_name || ""}
        onClose={() => setActionKind(null)}
        onDone={onRefresh}
      />

      {showModelDetailModal &&
        (isModelExpertise(user?.expertise) ? (
          <ModelDetailModal
            hairColor={user?.hair_color}
            eyeColor={user?.eye_color}
            height={user?.height}
            size={user?.size}
            weight={user?.weight}
            isOpen={showModelDetailModal}
            onClose={() => setShowModelDetailModal(false)}
            userId={user?._id}
            isMain
          />
        ) : (
          user && (
            <ModelServiceModal
              services={user?.services}
              isOpen={showModelDetailModal}
              onClose={() => setShowModelDetailModal(false)}
              userId={user?._id}
            />
          )
        ))}
      <div
        className="flex items-center justify-end cursor-pointer gap-1"
        onClick={() => {
          if (user?.user_name) {
            navigator.clipboard.writeText(
              `modstagram.com/users/${user.user_name}`
            );
            alert(t("settings.profile.linkCopied"));
          }
        }}
      >
        <Image
          width={22}
          height={22}
          alt={"copy icon"}
          src={`/images/icons/copy.svg`}
          className="dark:invert"
        />
        <span>{`modstagram.com/users/${user?.user_name}`} </span>
      </div>
      <div className="grid grid-cols-3 gap-1 md:gap-4 mt-5">
        <Link
          className="w-full md:h-8 max-w-full"
          href={"/settings/profile/user-settings"}
        >
          <RoundedButton className="text-xs h-7 md:h-8 max-w-full w-full">
            {t("settings.userSettings")}
          </RoundedButton>
        </Link>
        <RoundedButton
          onClick={() => setActionKind("deactivate")}
          className="text-xs h-7 md:h-8 max-w-full w-full"
        >
          {t("settings.profile.deactivate")}
        </RoundedButton>
        <RoundedButton
          onClick={() => setActionKind("delete")}
          className="text-xs h-7 md:h-8 max-w-full w-full text-red-600"
        >
          {t("settings.profile.deleteAccount")}
        </RoundedButton>
      </div>
      <div className="grid grid-cols-2 gap-2 md:gap-4 mt-5 justify-center max-w-xl mx-auto">
        <RoundedDiv className="h-9">{t("settings.profile.province")}: {user?.province?.name}</RoundedDiv>
        <RoundedDiv className="h-9">{t("settings.profile.city")}: {user?.city?.name}</RoundedDiv>
      </div>
      <RoundedDiv className="w-full p-4 max-w-xl mx-auto mt-4 text-right !justify-start">
        {t("settings.profile.address")}: {user?.address}
      </RoundedDiv>
      <div className="rounded-2xl overflow-hidden max-w-xl mx-auto mt-4">
        {user?.lat && user?.lng && (
          <ShowMap lat={user?.lat} lng={user?.lng} height="200px" />
        )}
      </div>
      <RoundedDiv className="w-full p-4 max-w-xl mx-auto mt-4 text-right">
        IR {user?.shaba}
      </RoundedDiv>
      <div className="grid grid-cols-2 gap-2 md:gap-4 mt-5 justify-center max-w-xl mx-auto">
        <RoundedDiv className="h-9">{user?.mobile}</RoundedDiv>
        <RoundedDiv className="h-9">{user?.national_code}</RoundedDiv>
      </div>
    </div>
  );
}

export default ProfileContent;
