import { observer } from "mobx-react";

import { useTranslation } from "@buzzwaretech/i18n";
import { TrashIcon } from "@buzzwaretech/propel/icons";
import { Tooltip } from "@buzzwaretech/propel/tooltip";
import type { TIssueServiceType } from "@buzzwaretech/types";
import { EIssueServiceType } from "@buzzwaretech/types";
// ui
import { CustomMenu } from "@buzzwaretech/ui";
import {
    convertBytesToSize,
    getFileExtension,
    getFileName,
    getFileURL,
    renderFormattedDate,
} from "@buzzwaretech/utils";
// components
//
import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
import { getFileIcon } from "@/components/icons";
// helpers
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
import { useMember } from "@/hooks/store/use-member";
import { usePlatformOS } from "@/hooks/use-platform-os";

type TIssueAttachmentsListItem = {
  attachmentId: string;
  disabled?: boolean;
  issueServiceType?: TIssueServiceType;
};

export const IssueAttachmentsListItem = observer(
  function IssueAttachmentsListItem(props: TIssueAttachmentsListItem) {
    const { t } = useTranslation();
    // props
    const {
      attachmentId,
      disabled,
      issueServiceType = EIssueServiceType.ISSUES,
    } = props;
    // store hooks
    const { getUserDetails } = useMember();
    const {
      attachment: { getAttachmentById },
      toggleDeleteAttachmentModal,
    } = useIssueDetail(issueServiceType);
    // derived values
    const attachment = attachmentId
      ? getAttachmentById(attachmentId)
      : undefined;
    const fileName = getFileName(attachment?.attributes.name ?? "");
    const fileExtension = getFileExtension(attachment?.attributes.name ?? "");
    const fileIcon = getFileIcon(fileExtension, 18);
    const fileURL = getFileURL(attachment?.asset_url ?? "");
    // hooks
    const { isMobile } = usePlatformOS();

    if (!attachment) return <></>;

    return (
      <>
        <button
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            window.open(fileURL, "_blank");
          }}
        >
          <div className="group flex h-11 items-center justify-between gap-3 pr-2 pl-9 hover:bg-surface-2">
            <div className="flex items-center gap-3 truncate text-13">
              <div className="flex items-center gap-3">{fileIcon}</div>
              <Tooltip
                tooltipContent={`${fileName}.${fileExtension}`}
                isMobile={isMobile}
              >
                <p className="truncate font-medium text-secondary">{`${fileName}.${fileExtension}`}</p>
              </Tooltip>
              <span className="flex size-1.5 rounded-full bg-layer-1" />
              <span className="flex-shrink-0 text-placeholder">
                {convertBytesToSize(attachment.attributes.size)}
              </span>
            </div>

            <div className="flex items-center gap-3">
              {attachment?.created_by && (
                <>
                  <Tooltip
                    isMobile={isMobile}
                    tooltipContent={`${
                      getUserDetails(attachment?.created_by)?.display_name ?? ""
                    } uploaded on ${renderFormattedDate(attachment.updated_at)}`}
                  >
                    <div className="flex items-center justify-center">
                      <ButtonAvatars
                        showTooltip
                        userIds={attachment?.created_by}
                      />
                    </div>
                  </Tooltip>
                </>
              )}

              <CustomMenu
                ellipsis
                closeOnSelect
                placement="bottom-end"
                disabled={disabled}
              >
                <CustomMenu.MenuItem
                  onClick={() => {
                    toggleDeleteAttachmentModal(attachmentId);
                  }}
                >
                  <div className="flex items-center gap-2">
                    <TrashIcon className="h-3.5 w-3.5" strokeWidth={2} />
                    <span>{t("common.actions.delete")}</span>
                  </div>
                </CustomMenu.MenuItem>
              </CustomMenu>
            </div>
          </div>
        </button>
      </>
    );
  },
);