import {
  IconAlertCircleMini,
  IconArrowUpRightMini,
  IconSpinnerMini,
  location,
  SubtleButton,
  SubtleButtonLink,
  Tooltip
} from "@heydovetail/ui-components";
import React from "react";
import { AttachmentService } from "../../AttachmentService";
import { Attachment } from "../../util/attrs";
import { AttachmentDownloadUrlSubscribe } from "./AttachmentDownloadUrlSubscribe";

interface Props {
  attachment: Attachment;
  attachmentService: AttachmentService;
}

export function AttachmentDownloadButton(props: Props) {
  return (
    <AttachmentDownloadUrlSubscribe attachment={props.attachment} attachmentService={props.attachmentService}>
      {(attachmentDownloadUrl): React.ReactNode => {
        switch (attachmentDownloadUrl.type) {
          case "refreshing":
          case "pending":
            return (
              <SubtleButton disabled height={24} onClick={() => {}}>
                <IconSpinnerMini />
              </SubtleButton>
            );
          case "unavailable":
            return (
              <Tooltip align="right" text="File currently unavailable">
                <SubtleButton disabled height={24} onClick={() => {}}>
                  <IconAlertCircleMini />
                </SubtleButton>
              </Tooltip>
            );
          case "available":
            return (
              <Tooltip align="right" text="Open in new tab">
                <SubtleButtonLink height={24} location={location.external(attachmentDownloadUrl.url, { openInNewTab: true })}>
                  <IconArrowUpRightMini />
                </SubtleButtonLink>
              </Tooltip>
            );
        }
      }}
    </AttachmentDownloadUrlSubscribe>
  );
}