import { location, PlayerVideo, BORDER_RADIUS } from "@heydovetail/ui-components";
import React from "react";
import { AttachmentCard, Props as AttachmentCardProps } from "../AttachmentCard";
import { AttachmentDownloadUrlSubscribe } from "../Shared/AttachmentDownloadUrlSubscribe";

type Props = AttachmentCardProps;

export class AttachmentVideo extends React.PureComponent<Props> {
  public render() {
    return (
      <AttachmentDownloadUrlSubscribe {...this.props}>
        {downloadUrl => (
          <AttachmentCard {...this.props} previewPosition="top" fullWidthPreview>
            {downloadUrl.type == "available" ? (
              <PlayerVideo
                src={downloadUrl.type === "available" ? location.external(downloadUrl.url).url : undefined}
                borderRadius={`${BORDER_RADIUS} ${BORDER_RADIUS} 0 0`}
              />
            ) : null}
          </AttachmentCard>
        )}
      </AttachmentDownloadUrlSubscribe>
    );
  }
}