"use client"

import React, { useEffect, useMemo, useState } from "react"
import { useTranslations } from "next-intl"
import { Avatar, Drawer, Table } from "antd"
import classNames from "classnames"
import { DrawerCss } from "./style"
import CustomDropDownSelect from "@component/Common/CustomDropDownSelect"
import { renderTooltipText } from "@component/Common/TooltipText"
import NotFoundBox from "../Notfound"
import { formatDate } from "@/util/Common"
import { IAffiliateRespon } from "@/type/Affiliate"

interface IProps {
  open: boolean
  loading?: boolean
  setOpen: (isOpen: boolean) => void
  formRef?: any
  ListMyAffiliateByCode?: any[]
  codeAffiliate?: string
  dataSourceAffiliate: IAffiliateRespon[]
  setCodeAffiliate: React.Dispatch<React.SetStateAction<string>>
}

const AffiliateShareInfo = (props: IProps) => {
  const trans = useTranslations("profile")
  const transMusic = useTranslations("music")

  const [selected, setSelected] = useState("")
  const [temp, setTemp] = useState(selected)

  useEffect(() => {
    setSelected(props?.codeAffiliate || "")
  }, [props?.codeAffiliate])

  useEffect(() => {
    props.setCodeAffiliate(selected || "")
  }, [selected])

  const listCount = useMemo(() => props?.ListMyAffiliateByCode?.length || 0, [props?.ListMyAffiliateByCode])

  const columns: any = useMemo(
    () => [
      {
        dataIndex: "username",
        key: "username",
        className: "!px-1 !py-4",
        width: 184,
        ellipsis: {
          showTitle: false,
        },
        render: (username: string, record: any) => {
          return (
            <div className="flex">
              <Avatar
                className="shrink-0"
                src={record?.src}
                alt={record?.alt}
                size={42}>
                {record?.src ? username.slice(0, 2).toUpperCase() : "UN"}
              </Avatar>
              {renderTooltipText(username, "font-semibold")}
            </div>
          )
        },
      },
      {
        dataIndex: "created",
        key: "created",
        align: "right",
        className: "!px-1 !py-4",
        width: 184,
        ellipsis: {
          showTitle: false,
        },
        render: (created: string) => {
          return created ? renderTooltipText(formatDate(created, "DD MMM, YYYY"), "font-light") : "--"
        },
      },
    ],
    [props?.ListMyAffiliateByCode],
  )

  const itemList = useMemo(() => props?.dataSourceAffiliate?.map((item) => ({ value: item?.code, label: item?.code })), [props?.dataSourceAffiliate])

  return (
    <Drawer
      className={classNames(``, DrawerCss)}
      closable
      destroyOnClose
      title={<p>{trans("affiliate_shared_list")}</p>}
      placement="right"
      open={props?.open}
      loading={props?.loading}
      onClose={() => props.setOpen(false)}
      width={444}>
      <div className="flex flex-col items-center">
        <CustomDropDownSelect
          selected={selected}
          setSelected={setSelected}
          temp={temp}
          setTemp={setTemp}
          itemList={itemList || []}
          pre={trans("code")}
          classNameBtnSelect="w-full !justify-between !bg-[var(--primary--20)] hover:!text-[var(--secondary-100)] hover:opacity-60"
        />
        <div className="w-full flex justify-between p-6 font-semibold text-base leading-[22px] text-[var(--secondary-100)] border-b border-solid border-[var(--secondary-20)]">
          <p>{trans("shared_list")}</p>
          <p>{listCount}</p>
        </div>

        <Table
          rowKey={"id"}
          loading={props?.loading}
          showHeader={false}
          columns={columns}
          dataSource={props?.ListMyAffiliateByCode || []}
          pagination={false}
          className="px-6"
          locale={{
            emptyText: (
              <NotFoundBox
                className="!bg-[var(--secondary-10)] py-8 rounded-3xl"
                backHome={false}
                message={transMusic("we_found_nothing_here")}
              />
            ),
          }}
        />
      </div>
    </Drawer>
  )
}

export default AffiliateShareInfo