import { WithDisposable } from '@cbi-blocksuite/block-std';
import { t } from '@cbi-blocksuite/blocks';
import { css, html, LitElement, nothing, svg } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import type { CbiDocInfo } from './cbi-doc-info.js';
const hideIcon = svg`
`;
const showIcon = svg`
`;
@customElement('cbi-doc-info-menu')
export class CbiDocInfoMenu extends WithDisposable(LitElement) {
static override styles = css`
.overlay-mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: var(--affine-z-index-popover);
}
.cbi-doc-info-menu-container {
z-index: var(--affine-z-index-popover);
user-select: none;
}
.cbi-doc-info-menu {
position: fixed;
left: 0;
top: 0;
width: 240px;
max-height: 240px;
overflow-y: auto;
box-sizing: border-box;
font-size: var(--affine-font-base);
padding-top: 8px;
display: flex;
flex-direction: column;
background: var(--affine-background-overlay-panel-color);
box-shadow: var(--affine-shadow-2);
border-radius: 6px;
z-index: var(--affine-z-index-popover);
/* transition: max-height 0.2s ease-in-out; */
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
padding: 5px 24px 5px 16px;
box-sizing: border-box;
font-size: 14px;
cursor: pointer;
}
.menu-item:hover {
background-color: rgba(0, 0, 0, 0.04);
}
.menu-item.active {
color: #8b4eef;
}
.divider {
padding-top: 8px;
border-bottom: 1px solid var(--30_Disabled, #eceae9);
}
}
`;
@property({ attribute: false })
anchorEl!: HTMLDivElement;
@property({ attribute: false })
block!: CbiDocInfo;
@query('.cbi-doc-info-menu')
menuElement?: HTMLElement;
abortController = new AbortController();
closeTimer!: ReturnType;
close = () => {
this.abortController.abort();
// @ts-ignore
this.anchorEl = null;
this.block?.rootElement.classList.remove('menu-open');
};
handleMouseEnter = () => {
if (this.closeTimer) {
clearTimeout(this.closeTimer);
}
};
handleMouseLeave = () => {
this.closeTimer = setTimeout(() => {
this.close();
}, 500);
};
override render() {
const { anchorEl, block } = this;
if (!anchorEl) return nothing;
if (!block) return nothing;
const {
hideMediaProducer,
hideScriptWriter,
hideCreatedOn,
hideDueDate,
hideDocInfo,
docInfo,
updateInfoInMeta,
} = block;
const { top, left, height } = anchorEl.getBoundingClientRect();
return html`
`;
}
}