/**
 * 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 { useState } from 'react';
import { useTranslation } from '@byline/i18n/react';
import { ChevronDownIcon, GripperVerticalIcon, useSortable } from '@byline/ui/react';
import cx from 'clsx';
import { DraggableContextMenu } from './draggable-context-menu';
import styles from './sortable-item.module.css';
const ItemFrame = ({ label, children, onAddBelow, onRemove, grip, rootRef, style, dragging = false, rootClassName, }) => {
    const { t } = useTranslation('byline-admin');
    const [collapsed, setCollapsed] = useState(false);
    return (<div ref={rootRef} style={style} className={cx('byline-sortable', styles.root, rootClassName, dragging && ['byline-sortable-dragging', styles.dragging], collapsed && ['byline-sortable-collapsed', styles.collapsed])}>
      <div className={cx('byline-sortable-header', styles.header, !collapsed && ['byline-sortable-header-expanded', styles['header-expanded']])}>
        {grip}
        <div className={cx('byline-sortable-label', styles.label)}>{label}</div>
        <DraggableContextMenu onAddBelow={onAddBelow} onRemove={onRemove}/>
        <button type="button" className={cx('byline-sortable-toggle', styles.toggle)} onClick={() => setCollapsed((prev) => !prev)} aria-label={collapsed
            ? t('fields.sortable.expandAriaLabel')
            : t('fields.sortable.collapseAriaLabel')}>
          <ChevronDownIcon className={cx('byline-sortable-toggle-icon', styles['toggle-icon'], collapsed && ['byline-sortable-toggle-icon-rotated', styles['toggle-icon-rotated']])}/>
        </button>
      </div>
      <div className={cx('byline-sortable-content', styles.content, collapsed && ['byline-sortable-content-hidden', styles['content-hidden']])}>
        {children}
      </div>
    </div>);
};
export const SortableItem = ({ id, label, children, onAddBelow, onRemove, }) => {
    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
        id,
        transition: {
            duration: 250,
            easing: 'cubic-bezier(0, 0.2, 0.2, 1)',
        },
    });
    const style = {
        transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
        transition,
        zIndex: isDragging ? 10 : 'auto',
    };
    return (<ItemFrame label={label} onAddBelow={onAddBelow} onRemove={onRemove} rootRef={setNodeRef} style={style} dragging={isDragging} grip={<button type="button" className={cx('byline-sortable-grip', styles.grip)} {...attributes} {...listeners}>
          <GripperVerticalIcon className={cx('byline-sortable-grip-icon', styles['grip-icon'])}/>
        </button>}>
      {children}
    </ItemFrame>);
};
export const StaticItem = ({ label, children, onAddBelow, onRemove, }) => (<ItemFrame label={label} onAddBelow={onAddBelow} onRemove={onRemove} rootClassName="byline-sortable-static">
    {children}
  </ItemFrame>);