"use client"

import React, { useMemo } from "react"
import { useTranslations } from "next-intl"
import { Avatar, Drawer, Space } from "antd"
import classNames from "classnames"
import { DrawerCss } from "./style"
import { RenderMyContactStatus, renderButton, useOpenChat } from "@component/Contact/Common"
import dayjs from "dayjs"
import { IContacts } from "@/type/Contacts"

interface IProps {
  open: boolean
  loading?: boolean
  setOpen: (isOpen: boolean) => void
  formRef?: any
  inforContact?: any
  confirmDelete: (contact?: IContacts) => void
}

const MyContactInfo = (props: IProps) => {
  const trans = useTranslations("contact")
  const inforContact = useMemo(() => props?.inforContact, [props?.inforContact])
  const openChat = useOpenChat()

  const renderInfoDetail = (title: string, desc: string, className?: string) => {
    return (
      <div className={`mb-6 ${className || ""}`}>
        <p className="font-light text-sm text-black mb-2">{title}</p>
        <p className="text-[var(--secondary-100)] font-normal text-sm bg-[var(--secondary-10)] px-4 py-3">{desc}</p>
      </div>
    )
  }

  return (
    <Drawer
      className={classNames(``, DrawerCss)}
      closable
      destroyOnClose
      title={<p>{trans("contact_info")}</p>}
      placement="right"
      open={props?.open}
      loading={props?.loading}
      onClose={() => props.setOpen(false)}
      width={444}>
      <div className="flex flex-col items-center">
        <Avatar
          size={110}
          className="!bg-[--primary--30] !text-black !text-[3.25rem] !leading-[3.25rem] !font-semibold">
          {inforContact?.alpha}
        </Avatar>
        {RenderMyContactStatus(inforContact?.status)}
        <div className="w-full">
          {renderInfoDetail(trans("contacts"), inforContact?.name)}
          {/* {renderInfoDetail(trans("summary"), inforContact?.description)}
          {renderInfoDetail(trans("title"), inforContact?.title)}
          {renderInfoDetail(trans("phone"), inforContact?.phone)} */}
          {renderInfoDetail(trans("date_added"), dayjs.unix(inforContact?.created_at).format("MMM DD, YYYY"))}
        </div>
        <Space
          className="w-full"
          direction="vertical">
          {renderButton({
            title: trans("send_message"),
            onClick: () => {
              openChat(String(inforContact?.uid) || "")
            },
            icon: "/img/icon/message.svg",
            type: "primary",
          })}
          {renderButton({
            title: trans("remove_contact"),
            onClick: () => {
              props.confirmDelete(inforContact)
            },
            type: "default",
          })}
        </Space>
      </div>
    </Drawer>
  )
}

export default MyContactInfo