"use client"

import Image from "next/image"
import { useTranslations } from "next-intl"
import { useRouter } from "@/i18n/routing"
import classNames from "classnames"
import { CustomDropDownMenuCss, DropDownMenu } from "@component/Common/DropDownMenu"
import { IReminderItem } from "@/type/Reminders"
import dayjs from "dayjs"
import { useDeleteReminder } from "@/hook/useReminder"
import { useNotificationContext } from "../Layout/NotificationContext"
import { renderLabelItem } from "@/component/Common/LabelItem"

type IProps = {
  reminder: IReminderItem
  onReload?: () => void
}

export default function ReminderItem({ reminder, onReload }: IProps) {
  const router = useRouter()
  const transButton = useTranslations("button")
  const transBook = useTranslations("book")
  const deleteReminder = useDeleteReminder()
  const transMessage = useTranslations("message")
  const { notify } = useNotificationContext()

  const items = [
    {
      label: renderLabelItem(transBook("edit"), "/img/icon/edit.svg", "edit"),
      key: "1",
      onClick: () => router.push(`/reminder/${reminder.id}`),
    },
    {
      label: renderLabelItem(transBook("delete"), "/img/icon/trash_outline.svg", "trash_outline"),
      key: "2",
      onClick: () => handleDelate,
    }
  ]

  const handleDelate = () => {
    deleteReminder
      .mutateAsync(reminder.id)
      .then(() => {
        onReload && onReload()
      })
      .catch((error) => {
        const concatenatedMsgs = error?.response?.data.msgs || transMessage("fail")
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: concatenatedMsgs,
        })
      })
  }

  return (
    <div className="md:flex items-center relative text-[var(--secondary-100)]">
      <div className="pr-3 w-36 shrink-0 mb-1 md:mb-0">
        <p className="text-xl lg:text-2xl font-bold md:mb-1">{dayjs.unix(reminder.date).format("HH:mm")} AM</p>
        <p className="lg:text-base">{dayjs.unix(reminder.date).format("DD/MM/YYYY")}</p>
      </div>
      <div className="grow flex items-start bg-[var(--secondary-10)] border border-[var(--secondary-30)] rounded py-2">
        <div className="px-2 lg:px-3 w-16 shrink-0 lg:w-24 xl:w-36">
          <Image
            src={reminder?.category?.icon || "/img/default_image.jpg"}
            alt={reminder?.category?.category_name || ""}
            width={120}
            height={120}
            style={{
              width: "100%",
            }}
            className="object-contain"
          />
        </div>
        <div className="grow">
          <p className="text-[var(--primary-100)] font-semibold text-base lg:text-lg">{reminder?.category?.category_name || ""}</p>
          <p className="text-[var(--primary-60)] text-base lg:text-lg">{reminder.message}</p>
        </div>
      </div>
      <DropDownMenu
        className="absolute top-[6px] right-[6px]"
        menu={{ items, className: classNames("w-48", CustomDropDownMenuCss) }}
      />
    </div>
  )
}