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 { WidgetElement } from '@blockeditor/lit';
import { offset, shift } from '@floating-ui/dom';
import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { HoverController } from '../../../_common/components/hover/controller.js';
import { toast } from '../../../_common/components/toast.js';
import { PAGE_HEADER_HEIGHT } from '../../../_common/consts.js';
import { EdgelessModeIcon } from '../../../_common/icons/edgeless.js';
import { CaptionIcon, CopyIcon, DeleteIcon, DownloadIcon, } from '../../../_common/icons/text.js';
import { downloadBlob } from '../../../_common/utils/filesys.js';
import {} from '../../../surface-ref-block/index.js';
import { edgelessToBlob, writeImageBlobToClipboard } from './utils.js';
export const AFFINE_SURFACE_REF_TOOLBAR = 'affine-surface-ref-toolbar';
let AffineSurfaceRefToolbar = class AffineSurfaceRefToolbar extends WidgetElement {
    constructor() {
        super(...arguments);
        this._hoverController = new HoverController(this, ({ abortController }) => {
            return {
                template: SurfaceRefToolbarOptions({
                    blockElement: this.blockElement,
                    model: this.blockElement.model,
                    abortController,
                }),
                computePosition: {
                    referenceElement: this.blockElement,
                    placement: 'top-start',
                    middleware: [
                        offset({
                            mainAxis: 12,
                            crossAxis: 10,
                        }),
                        shift({
                            crossAxis: true,
                            padding: {
                                top: PAGE_HEADER_HEIGHT + 12,
                                bottom: 12,
                                right: 12,
                            },
                        }),
                    ],
                    autoUpdate: true,
                },
            };
        });
    }
    connectedCallback() {
        super.connectedCallback();
        this._hoverController.setReference(this.blockElement);
    }
};
AffineSurfaceRefToolbar = __decorate([
    customElement(AFFINE_SURFACE_REF_TOOLBAR)
], AffineSurfaceRefToolbar);
export { AffineSurfaceRefToolbar };
function SurfaceRefToolbarOptions(options) {
    const { blockElement, model, abortController } = options;
    const readonly = model.page.readonly;
    const hasValidReference = !!blockElement.referenceModel;
    return html `
    <style>
      :host {
        z-index: 1;
      }
      .surface-ref-toolbar-container {
        display: flex;
        box-sizing: border-box;
        box-shadow: var(--affine-shadow-2);
        border-radius: 8px;
        list-style: none;
        padding: 4px 8px;
        gap: 4px;
        align-items: center;
        background-color: var(--affine-background-overlay-panel-color);
        margin: 0;
      }
      .delete-button:hover {
        background: var(--affine-background-error-color);
        color: var(--affine-error-color);
      }
      .delete-button:hover > svg {
        color: var(--affine-error-color);
      }

      .divider {
        width: 1px;
        height: 24px;
        background-color: var(--affine-border-color);
        margin: 0 8px;
      }

      .view-in-edgeless-button {
        font-size: 12px;
        color: var(--affine-text-secondary-color);
        font-weight: 600;
        gap: 2px;
      }
    </style>

    <div class="surface-ref-toolbar-container">
      <icon-button
        ?hidden=${!hasValidReference || readonly}
        class="view-in-edgeless-button"
        text="View in Edgeless"
        width="fit-content"
        @click=${() => blockElement.viewInEdgeless()}
        >${EdgelessModeIcon}
      </icon-button>
      <div
        class="divider"
        ?hidden=${readonly}
        style=${styleMap({
        display: hasValidReference ? undefined : 'none',
    })}
      ></div>
      <icon-button
        size="32px"
        ?hidden=${readonly}
        @click=${() => {
        blockElement.showCaption();
    }}
      >
        ${CaptionIcon}
        <affine-tooltip tip-position="top">Caption</affine-tooltip>
      </icon-button>
      <icon-button
        size="32px"
        ?hidden=${!hasValidReference}
        @click=${() => {
        const referencedModel = blockElement.referenceModel;
        if (!referencedModel)
            return;
        edgelessToBlob(blockElement.host, {
            surfaceRefBlock: blockElement,
            surfaceRenderer: blockElement.surfaceRenderer,
            edgelessElement: referencedModel,
            blockContainer: blockElement.blocksPortal,
        })
            .then(blob => {
            const fileName = 'title' in referencedModel
                ? referencedModel.title?.toString() ?? 'Edgeless Content'
                : 'Edgeless Content';
            downloadBlob(blob, fileName);
        })
            .catch(err => {
            console.error(err);
        });
    }}
      >
        ${DownloadIcon}
        <affine-tooltip tip-position="top">Download</affine-tooltip>
      </icon-button>
      <icon-button
        size="32px"
        ?hidden=${!hasValidReference}
        @click=${() => {
        edgelessToBlob(blockElement.host, {
            surfaceRefBlock: blockElement,
            surfaceRenderer: blockElement.surfaceRenderer,
            edgelessElement: blockElement.referenceModel,
            blockContainer: blockElement.blocksPortal,
        })
            .then(blob => {
            return writeImageBlobToClipboard(blob);
        })
            .then(() => {
            toast(blockElement.host, 'Copied image to clipboard');
        })
            .catch(err => {
            console.error(err);
        });
    }}
      >
        ${CopyIcon}
        <affine-tooltip tip-position="top">Copy to clipboard</affine-tooltip>
      </icon-button>
      <icon-button
        class="delete-button"
        size="32px"
        ?hidden=${readonly}
        @click="${() => {
        model.page.deleteBlock(model);
        abortController.abort();
    }}"
      >
        ${DeleteIcon}
        <affine-tooltip tip-position="top">Delete</affine-tooltip>
      </icon-button>
    </div>
  `;
}
//# sourceMappingURL=surface-ref-toolbar.js.map