"use client"

import { isChatProfileEditDrawerOpenAtom, createDrawerOpenState } from "@/atoms/chat";
import { useGetMyChatSetting } from "@/hooks/useIm";
import { useSetAtom } from "jotai";
import { useChatConfig } from "../../../context/chatConfig";
import { Gender } from "@/types/user";
import { cn, getAge } from "@/lib/utils";


const ChatProfilePersona = () => {
  const { aiId } = useChatConfig();
  const setDrawerState = useSetAtom(isChatProfileEditDrawerOpenAtom);
  const setIsChatProfileEditDrawerOpen = (open: boolean) => setDrawerState(createDrawerOpenState(open));
  const { data: chatSettingData } = useGetMyChatSetting({ aiId });

  const { nickname, sex, birthday, whoAmI } = chatSettingData || {};

  const genderMap = {
    [Gender.MALE]: 'Male',
    [Gender.FEMALE]: 'Female',
    [Gender.OTHER]: 'Unspecified',
  }

  return (
    <div className="flex flex-col gap-3 w-full">
      <div className="flex justify-between items-center gap-3">
        <div className="txt-title-s">My Chat Persona</div>
        <div className="txt-label-m text-primary-variant-normal cursor-pointer" onClick={() => setIsChatProfileEditDrawerOpen(true)}>Edit</div>
      </div>

      <div className="bg-surface-base-normal py-1 rounded-m">
        <div className="py-3 px-4 flex justify-between items-center gap-4">
          <div className="txt-label-l text-txt-secondary-normal">Nickname</div>
          <div className="txt-body-l text-txt-primary-normal truncate flex-1 text-right">{nickname}</div>
        </div>
        <div className="py-3 px-4 flex justify-between items-center gap-4">
          <div className="txt-label-l text-txt-secondary-normal">Gender</div>
          <div className="txt-body-l text-txt-primary-normal">{genderMap[sex as keyof typeof genderMap]}</div>
        </div>
        <div className="py-3 px-4 flex justify-between items-center gap-4">
          <div className="txt-label-l text-txt-secondary-normal">Age</div>
          <div className="txt-body-l text-txt-primary-normal">{getAge(Number(birthday))}</div>
        </div>
        <div className="py-3 px-4 flex justify-between items-center gap-4">
          <div className="txt-label-l text-txt-secondary-normal">Who am I</div>
          <div className={cn("txt-body-l text-txt-primary-normal truncate flex-1 text-right", whoAmI ? 'text-txt-primary-normal' : 'text-txt-secondary-normal')}>{whoAmI || 'Unfilled'}</div>
        </div>
      </div>
    </div>
  );
}
 
export default ChatProfilePersona;