import React from "react";
import { AttachmentUpload } from "../../AttachmentService";
import { styled } from "typestyle-react";
import { humanAttachmentTitle } from "../../util/text";
import { Flex, Item, ProgressBar } from "@heydovetail/ui-components";

interface Props {
  name?: string;
  uploadState: AttachmentUpload;
}

export function AttachmentDetails(props: Props) {
  const { name, uploadState } = props;

  let content: React.ReactNode = null;

  switch (uploadState.type) {
    case "uploading":
      content = (
        <LabelledProgressBar label="Uploading" numerator={uploadState.bytesUploaded} denominator={uploadState.bytesTotal} />
      );
      break;
    case "queued":
      content = <LabelledProgressBar label="Waiting to upload" numerator={0} denominator={1} />;
      break;
    case "failed":
      content = "Upload Failed";
      break;
    case "unknown":
    case "complete":
      content = humanAttachmentTitle(name);
  }

  return <Details>{content}</Details>;
}

const Details = styled("div", {
  flexGrow: 1,
  fontSize: "14px",
  fontWeight: 600,
  lineHeight: "24px",
  marginLeft: 8,
  overflow: "hidden",
  // When used in an attachment card, and the user drags when a mouse, this
  // prevents the dragged preview from being just the name or icon, and instead
  // causes the drag to happen on the card container, which means the entire
  // card is rendered in a dragged preview.
  pointerEvents: "none",
  textOverflow: "ellipsis",
  whiteSpace: "nowrap"
});

const LabelledProgressBar: React.SFC<{ label: string; numerator: number; denominator: number }> = ({
  label,
  numerator,
  denominator
}) => (
  <Flex styled={{ alignItems: "center", gap: 16 }}>
    <Item style={{ flexGrow: 0 }}>{label}</Item>
    <Item>
      <ProgressBar completed={numerator / denominator} />
    </Item>
  </Flex>
);