"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";
interface ProfileProfileContentProps {
  user: User | undefined;
}
function ProfileContent({ user }: ProfileProfileContentProps) {
  const [showModelDetailModal, setShowModelDetailModal] =
    useState<boolean>(false);
  return (
    <div className="px-4 py-2 w-full text-xs md:text-sm font-semibold">
      {showModelDetailModal &&
        (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("لینک کپی شد!"); // یا می‌توان از toast استفاده کرد
          }
        }}
      >
        <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-4 gap-1 md:gap-4 mt-5">
        <Link className="w-full md:h-8 max-w-full" href={"/settings/edit"}>
          <RoundedButton className="text-xs h-7 md:h-8 max-w-full w-full">
            ویرایش
          </RoundedButton>
        </Link>
        <RoundedButton
          onClick={() => {
            if (user?.user_name) {
              navigator.clipboard.writeText(
                `modstagram.com/users/${user.user_name}`
              );
              alert("لینک کپی شد!"); // یا می‌توان از toast استفاده کرد
            }
          }}
          className="text-xs h-7 md:h-8 max-w-full w-full"
        >
          اشتراک گذاری
        </RoundedButton>
        <Link className="w-full md:h-8 max-w-full" href={"/settings/chats"}>
          <RoundedButton className="text-xs h-7 md:h-8 max-w-full w-full">
            پیامها
          </RoundedButton>
        </Link>
        <Link className="w-full md:h-8 max-w-full" href={"/settings/workroom"}>
          <RoundedButton className="text-xs h-7 md:h-8 max-w-full w-full">
            اتاق کار
          </RoundedButton>
        </Link>
      </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">استان: {user?.province?.name}</RoundedDiv>
        <RoundedDiv className="h-9">شهر: {user?.city?.name}</RoundedDiv>
      </div>
      <RoundedDiv className="w-full p-4 max-w-xl mx-auto mt-4 text-right !justify-start">
        آدرس: {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;
