import { Widget } from '../../imports.js';
const { Box, Overlay, EventBox } = Widget;

import Gtk from 'gi://Gtk';

const MAX_OFFSET = 200;
const OFFSCREEN = 500;
const TRANSITION = 'transition: margin 0.5s ease, opacity 3s ease;';


export default ({ properties, connections, props } = {}) => {
  let widget = EventBox({});
  let gesture = Gtk.GestureDrag.new(widget)

  widget.add(Overlay({
    ...props,
    properties: [
      ...properties,
      ['dragging', false],
    ],
    child: Box({className: 'player'}),
    connections: [
      ...connections,

      [gesture, overlay => {
        if (overlay.list().length <= 1)
          return;

        overlay._dragging = true;
        const offset = gesture.get_offset()[1];

        let playerBox = overlay.list().at(-1);

        if (offset >= 0) {
          playerBox.setStyle(`margin-left:   ${offset}px;
                              margin-right: -${offset}px;
                              ${playerBox._bgStyle}`);
        }
        else {
          let newOffset = Math.abs(offset);
          playerBox.setStyle(`margin-left: -${newOffset}px;
                              margin-right: ${newOffset}px;
                              ${playerBox._bgStyle}`);
        }
        overlay._selected = playerBox;
      }, 'drag-update'],

      [gesture, overlay => {
        if (overlay.list().length <= 1)
          return;

        overlay._dragging = false;
        const offset = gesture.get_offset()[1];

        let playerBox = overlay.list().at(-1);

        if (Math.abs(offset) > MAX_OFFSET) {
          if (offset >= 0) {
            playerBox.setStyle(`${TRANSITION}
                                margin-left:   ${OFFSCREEN}px;
                                margin-right: -${OFFSCREEN}px;
                                opacity: 0;
                                ${playerBox._bgStyle}`);
          }
          else {
            playerBox.setStyle(`${TRANSITION}
                                margin-left: -${OFFSCREEN}px;
                                margin-right: ${OFFSCREEN}px;
                                opacity: 0;
                                ${playerBox._bgStyle}`);
          }
          setTimeout(() => {
            overlay.reorder_overlay(playerBox, 0);
            playerBox.setStyle(playerBox._bgStyle);
            overlay._selected = overlay.list().at(-1);
          }, 500);
        }
        else
          playerBox.setStyle(`${TRANSITION} ${playerBox._bgStyle}`);

      }, 'drag-end'],
    ],
  }));
  widget.child.list = () => widget.child.get_children().filter(ch => ch._bgStyle !== undefined);

  return widget;
};