"use client"

import { Modal } from "antd"
import { lowerCase } from "lodash"
import { useTranslations } from "next-intl"
import Image from "next/image"
import { useState } from "react"
import DeleteAccount from "./DeleteAccount"

type IProps = {
  user: any
}

export default function UserInfo({ user }: IProps) {
  const tranAccount = useTranslations("account")
  const tranForm = useTranslations("form")
  const trans = useTranslations("profile")
  const [isModalOpen, setIsModalOpen] = useState(false)

  const handleCancel = () => {
    setIsModalOpen(false)
  }
  
  return (
    <div className="">
      <div className="px-4 xl:px-6 py-6 border-b border-[var(--secondary-20)] flex flex-col items-center">
        <div className="bg-white border border-[var(--secondary-20)] rounded-full w-20 h-20 lg:w-28 lg:h-28 xl:w-32 xl:h-32 mb-4">
          <Image
            src={user?.photo}
            alt="User"
            width={120}
            height={120}
            onError={(e) => (e.currentTarget.src = "/img/clipped.svg")}
            className="rounded-full w-full h-full"
          />
        </div>
        <p className="font-bold text-base lg:text-lg">{`${user?.firstname || ""} ${user?.lastname || ""}`}</p>
        <p className="font-semibold lg:text-base text-[var(--secondary-50)]">
          {lowerCase(user?.group) === "user" ? "P-Account" : lowerCase(user?.group) === "blogger" ? "NPBV-Account" : "NP-Account"}
          <span className="w-2 h-2 rounded-full bg-[var(--secondary-30)] inline-block ml-2 mr-1"></span> {user?.country || ""}
        </p>
      </div>
      <div className="px-4 xl:px-6 py-6">
        <ul>
          <li className="grid grid-cols-12 pb-1.5">
            <p className="col-span-4 text-[var(--black--color-4)]">{trans("publication")}</p>
            <p className="col-span-8 text-[var(--market--title-color)] text-base">: {user?.publicationname}</p>
          </li>
          <li className="grid grid-cols-12 py-1.5">
            <p className="col-span-4 text-[var(--black--color-4)]">{trans("mobile")}</p>
            <p className="col-span-8 text-[var(--market--title-color)] text-base">: {user?.phonenumber}</p>
          </li>
          <li className="grid grid-cols-12 py-1.5">
            <p className="col-span-4 text-[var(--black--color-4)]">{tranAccount("email_ID")}</p>
            <p className="col-span-8 text-[var(--market--title-color)] text-base text-nowrap line-clamp-1">: {user?.email}</p>
          </li>
          <li className="grid grid-cols-12 py-1.5">
            <p className="col-span-4 text-[var(--black--color-4)]">{tranForm("address")}</p>
            <p className="col-span-8 text-[var(--market--title-color)] text-base">: {user?.address}</p>
          </li>
          <li className="grid grid-cols-12 py-1.5">
            <p className="col-span-4 text-[var(--black--color-4)]">{tranForm("city")}</p>
            <p className="col-span-8 text-[var(--market--title-color)] text-base">: {user?.city}</p>
          </li>
          <li className="grid grid-cols-12 py-1.5">
            <p className="col-span-4 text-[var(--black--color-4)]">{tranForm("state")}</p>
            <p className="col-span-8 text-[var(--market--title-color)] text-base">: {user?.state}</p>
          </li>
          <li className="grid grid-cols-12 pt-1.5">
            <p className="col-span-4 text-[var(--black--color-4)]">{tranForm("postal_code")}</p>
            <p className="col-span-8 text-[var(--market--title-color)] text-base">: {user?.zipcode}</p>
          </li>
        </ul>
        <div className="text-center pt-6">
          <button
            onClick={() => setIsModalOpen((pre) => !pre)}
            className="max-w-full border border-[var(--danger-70)] text-[var(--danger-70)] rounded-lg text-base font-semibold bg-white h-12 w-60 inline-flex items-center justify-center">
            {trans("delete_account")}
          </button>
        </div>
      </div>
      <Modal
        title=""
        open={isModalOpen}
        closable={false}
        maskClosable={false}
        width={700}
        onCancel={() => setIsModalOpen((pre) => !pre)}
        footer={null}>
        <DeleteAccount onCancel={handleCancel} />
      </Modal>
    </div>
  )
}