'use client';
/**
 * This Source Code is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * Copyright (c) Infonomic Company Limited
 */
import { useTranslation } from '@byline/i18n/react';
import { DeleteIcon, Dropdown as DropdownMenu, EllipsisIcon, IconButton, PlusIcon, } from '@byline/ui/react';
import cx from 'clsx';
import styles from './draggable-context-menu.module.css';
export function DraggableContextMenu({ onAddBelow, onRemove, }) {
    const { t } = useTranslation('byline-admin');
    const itemClass = cx('byline-draggable-menu-item', styles.item);
    const rowClass = cx('byline-draggable-menu-row', styles.row);
    const iconSlotClass = cx('byline-draggable-menu-icon-slot', styles['icon-slot']);
    const labelClass = cx('byline-draggable-menu-label', styles.label);
    return (<DropdownMenu.Root modal={false}>
      <DropdownMenu.Trigger render={<IconButton variant="text" size="sm" aria-label={t('fields.draggableMenu.triggerAriaLabel')}/>}>
        <EllipsisIcon width="16px" height="16px"/>
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content align="end" sideOffset={0} className={cx('byline-draggable-menu', styles.menu)}>
          <DropdownMenu.Item className={itemClass} onClick={onAddBelow}>
            <div className={rowClass}>
              <span className={iconSlotClass}>
                <PlusIcon width="18px" height="18px"/>
              </span>
              <span className={labelClass}>{t('fields.draggableMenu.addBelow')}</span>
            </div>
          </DropdownMenu.Item>
          <DropdownMenu.Separator className={cx('byline-draggable-menu-separator', styles.separator)}/>
          <DropdownMenu.Item className={itemClass} onClick={onRemove}>
            <div className={rowClass}>
              <div className={rowClass}>
                <span className={iconSlotClass}>
                  <DeleteIcon width="18px" height="18px" svgClassName={cx('byline-draggable-menu-delete-icon', styles['delete-icon'])}/>
                </span>
                <span className={cx('byline-draggable-menu-label byline-draggable-menu-label-danger', styles.label, styles['label-danger'])}>
                  {t('fields.draggableMenu.remove')}
                </span>
              </div>
            </div>
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>);
}