import React from "react";
import { styled } from "typestyle-react";
import { AttachmentService } from "../../AttachmentService";
import { Attachment } from "../../util/attrs";
import { getPreviewType, PreviewType } from "../AttachmentPreview";
import { AttachmentActions } from "../Shared/AttachmentActions";
import { AttachmentDetails } from "../Shared/AttachmentDetails";
import { AttachmentDownloadButton } from "../Shared/AttachmentDownloadButton";
import { AttachmentUploadSubscribe } from "../Shared/AttachmentUploadSubscribe";
import { SelectionMask } from "../Shared/SelectionMask";
import { Flex, Item, COLORS, BORDER_RADIUS } from "@heydovetail/ui-components";

export interface Props {
  attachment: Attachment;
  attachmentService: AttachmentService;
  children?: React.ReactNode;
  editable: boolean;
  previewPosition?: "top" | "bottom";
  onHidePreview?: () => void;
  onShowPreview: () => void;
  onRemove: () => void;
  style?: "active" | "selected";
  fullWidthPreview?: boolean;
}

export class AttachmentCard extends React.PureComponent<Props> {
  public render() {
    const {
      attachment,
      attachmentService,
      children,
      editable,
      onHidePreview,
      onRemove,
      onShowPreview,
      previewPosition = "bottom",
      fullWidthPreview = false,
      style
    } = this.props;

    return (
      <AttachmentUploadSubscribe attachment={attachment} attachmentService={attachmentService}>
        {uploadState => (
          <Card styled={{ active: style === "active", fullWidthPreview }}>
            <Flex styled={{ gap: 8, layout: "column" }} style={{ width: "100%" }}>
              {previewPosition === "top" && children !== undefined ? <Item>{children}</Item> : null}
              <Item
                style={{
                  padding: fullWidthPreview ? (previewPosition === "top" ? "0 8px 8px 8px" : "8px 8px 0 8px") : "inherit"
                }}
              >
                <Flex styled={{ alignItems: "center", gap: 8 }}>
                  <Item style={{ minWidth: 0 }}>
                    <AttachmentDetails name={attachment.name} uploadState={uploadState} />
                  </Item>
                  <Item style={{ flexGrow: 0 }}>
                    <Flex>
                      <Item>
                        <AttachmentDownloadButton attachment={attachment} attachmentService={attachmentService} />
                      </Item>
                      <Item>
                        <AttachmentActions
                          attachment={attachment}
                          attachmentService={attachmentService}
                          editable={editable}
                          hasPreview={getPreviewType(attachment) !== PreviewType.NONE}
                          onRemove={onRemove}
                          onHidePreview={onHidePreview}
                          onShowPreview={onShowPreview}
                        />
                      </Item>
                    </Flex>
                  </Item>
                </Flex>
              </Item>
              {previewPosition === "bottom" && children !== undefined ? <Item>{children}</Item> : null}
            </Flex>
            {style === "selected" ? <SelectionMask /> : null}
          </Card>
        )}
      </AttachmentUploadSubscribe>
    );
  }
}

const Card = styled("div", (props: { active: boolean; fullWidthPreview: boolean }) => ({
  alignItems: "center",
  background: props.active ? COLORS.b04 : COLORS.i04,
  borderRadius: BORDER_RADIUS,
  boxShadow: props.active ? `0 0 0 2px ${COLORS.blue}` : undefined,
  color: COLORS.i60,
  display: "flex",
  overflow: "hidden",
  padding: props.fullWidthPreview ? 0 : 8,
  position: "relative",
  width: "100%"
}));