var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { ShadowlessElement } from '@blockeditor/lit';
import { css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { humanFileSize } from '../../_common/utils/math.js';
import { FailedImageIcon, ImageIcon, LoadingIcon } from '../styles.js';
const ELEMENT_TAG = 'affine-image-block-card';
export const SURFACE_IMAGE_CARD_WIDTH = 220;
export const SURFACE_IMAGE_CARD_HEIGHT = 122;
export const NOTE_IMAGE_CARD_HEIGHT = 78;
export var ImageState;
(function (ImageState) {
    ImageState[ImageState["Ready"] = 0] = "Ready";
    ImageState[ImageState["Loading"] = 1] = "Loading";
    ImageState[ImageState["Failed"] = 2] = "Failed";
})(ImageState || (ImageState = {}));
let AffinePageImageCard = class AffinePageImageCard extends ShadowlessElement {
    constructor() {
        super(...arguments);
        this.isInSurface = false;
        this.imageState = 0;
        this.imageName = null;
        this.imageSize = -1;
    }
    render() {
        const width = this.isInSurface ? `${SURFACE_IMAGE_CARD_WIDTH}px` : '100%';
        const height = this.isInSurface
            ? `${SURFACE_IMAGE_CARD_HEIGHT}px`
            : `${NOTE_IMAGE_CARD_HEIGHT}px`;
        const contentIcon = this.imageState === ImageState.Loading
            ? LoadingIcon
            : this.imageState === ImageState.Failed
                ? FailedImageIcon
                : ImageIcon;
        const contentText = this.imageState === ImageState.Loading
            ? 'Loading image...'
            : this.imageState === ImageState.Failed
                ? 'Image loading failed.'
                : this.imageName ?? 'Image';
        const size = !isNaN(this.imageSize) && this.imageSize > 0
            ? humanFileSize(this.imageSize, true, 0)
            : null;
        return html `
      <div
        class="affine-image-block-card"
        style="width:${width};height:${height};"
      >
        <div class="affine-image-block-card-content">
          ${contentIcon}
          <span class="affine-image-block-card-title">${contentText}</span>
        </div>
        <div class="affine-image-card-size">${size}</div>
      </div>
    `;
    }
};
AffinePageImageCard.styles = css `
    .affine-image-block-card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: var(--affine-background-secondary-color, #f4f4f5);
      border-radius: 8px;
      border: 1px solid var(--affine-background-tertiary-color, #eee);
      padding: 12px;
      margin-top: 12px;
    }

    .affine-image-block-card-content {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--affine-placeholder-color);
      text-align: justify;
      font-family: var(--affine-font-family);
      font-size: var(--affine-font-sm);
      font-style: normal;
      font-weight: 600;
      line-height: var(--affine-line-height);
      user-select: none;
    }

    .affine-image-card-size {
      overflow: hidden;
      padding-top: 12px;
      color: var(--affine-text-secondary-color);
      text-overflow: ellipsis;
      font-size: 10px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      user-select: none;
    }
  `;
__decorate([
    property({ type: Boolean })
], AffinePageImageCard.prototype, "isInSurface", void 0);
__decorate([
    property({ type: Number })
], AffinePageImageCard.prototype, "imageState", void 0);
__decorate([
    property()
], AffinePageImageCard.prototype, "imageName", void 0);
__decorate([
    property({ type: Number })
], AffinePageImageCard.prototype, "imageSize", void 0);
AffinePageImageCard = __decorate([
    customElement(ELEMENT_TAG)
], AffinePageImageCard);
export { AffinePageImageCard };
//# sourceMappingURL=image-card.js.map