"use client"

import React, { useMemo } from "react"
import { useTranslations } from "next-intl"
import { Drawer, Space } from "antd"
import classNames from "classnames"
import { DrawerCss } from "./style"
import { RenderMyContactStatus, renderButton } from "@component/Contact/Common"
import Image from "next/image"
import { SOURCE_CONTACT, typeContactOptions } from "@/config/constant"
import { find } from "lodash"
import { renderTooltipText } from "@/component/Common/TooltipText"
import { IWizzorContacts } from "@/type/Contacts"

interface IProps {
  open: boolean
  loading?: boolean
  setOpen: (isOpen: boolean) => void
  formRef?: any
  inforContact?: IWizzorContacts
  confirmDelete: (contact?: IWizzorContacts) => void
  isHeart: boolean
  setIsHeart: (isOpen: boolean) => void
  updateContact: (detailContact: IWizzorContacts) => void
  loadingUpdate?: boolean
}

const WizzorContactInfo = (props: IProps) => {
  const trans = useTranslations("contact")
  const typeContact = typeContactOptions()

  const inforContact = useMemo(() => props?.inforContact, [props?.inforContact])

  const contactType = find(typeContact, { value: inforContact?.type })
  const contactSource = find(SOURCE_CONTACT, { value: inforContact?.source })

  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 mb-5">
        <div className="w-[8.25rem] mr-4">
          <Image
            src={"/img/avatar_2.jpg"}
            alt={"avt"}
            width={132}
            height={132}
            className={`w-full aspect-square`}
          />
        </div>
        <div>
          <p className="text-2xl leading-[30px] font-bold text-[var(--secondary-100)]">{inforContact?.name}</p>
          {RenderMyContactStatus(inforContact?.is_favourite ? "online" : "offline", "!px-0")}
        </div>
      </div>
      <Space className="w-full mb-7">
        {/* {renderButton({
          title: trans("send_message"),
          onClick: () => {
            console.log("add")
          },
          icon: "/img/icon/message.svg",
          type: "primary",
        })} */}
        {renderButton({
          title: props?.isHeart ? trans("remove_favorite") : trans("add_favorite"),
          onClick: () => {
            inforContact && props.updateContact(inforContact)
            props.setIsHeart(!props?.isHeart)
          },
          isLoading: props?.loadingUpdate,
          icon: `/img/icon/${props?.isHeart ? "broken_heart" : "heart_outline_red"}.svg`,
          type: "default",
          className: `${
            props?.isHeart ? "!text-[var(--secondary-100)] !border-[var(--secondary-100)]" : "!text-[var(--danger-70)] !border-[var(--danger-70)]"
          }`,
        })}
      </Space>
      {renderInfoDetail(trans("summary"), inforContact?.summary || "")}
      <div className="flex py-6 mb-6 border-y-[1px] border-solid border-[var(--secondary-30)] gap-3">
        <div className="basis-1/2">
          <p className="font-light text-sm mb-2">Type</p>
          {/* {renderTooltipText(contactType?.label || "", `bg-[var(--secondary-10)] ${contactType?.textColor || ""}`, contactType?.bgColor)} */}
          {renderTooltipText(inforContact?.type || "")}
        </div>
        <div className="basis-1/2">
          <p className="font-light text-sm mb-2">Source</p>
          {/* {renderTooltipText(contactSource?.label || "", `bg-[var(--secondary-10)] ${contactSource?.textColor || ""}`, contactSource?.bgColor)} */}
          {renderTooltipText(inforContact?.source || "")}
        </div>
      </div>
      {renderInfoDetail(trans("contacts"), inforContact?.name || "")}
      {renderInfoDetail(trans("title"), inforContact?.title || "")}
      {renderInfoDetail(trans("company"), inforContact?.organization || "")}
      {renderInfoDetail(trans("email"), inforContact?.email || "")}
      {renderInfoDetail(trans("time_zone"), inforContact?.timezone || "")}
      <Space
        className="w-full"
        direction="vertical">
        {renderButton({
          title: trans("remove_contact"),
          onClick: () => {
            props.confirmDelete(inforContact)
          },
          type: "default",
        })}
      </Space>
    </Drawer>
  )
}

export default WizzorContactInfo