// @ts-nocheck

// import 'phaser';
// import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin';
import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
import { DefaultDepth, DragObjectDepth } from './Const';
import CreateColumnPanelsBox from './CreateColumnPanelsBox';

import CreateHeader from './CreateHeader';
import AddResizeController from './AddResizeController';

import { TreeNode } from 'src/types/stores/kanvaso';

type Scene = {
  rexUI: {

    add: {
      sizer: (config: SizerConfig) => Sizer;
    };
  };

};

type SizerConfig = {
  orientation: string;
  space: {

    left: number;
    right: number;
    top: number;
    bottom: number;

  };
};

type Sizer = {
  add: (item: any, config: any) => void;
};

const CreateScrollablePanel = (
  scene: Scene,

  objectTree: TreeNode,

  registry,

): ScrollablePanel => {

  const config: ScrollablePanelConfig = {

    adaptThumbSizeMode: true,

    width: 400,
    height: 400,
    background: scene.rexUI.add.roundRectangle({
      radius: 10,
      strokeColor: COLOR_DARK,
    }),
    panel: {

      child: CreateColumnPanelsBox(
        scene,

        objectTree ? objectTree[0]?.childrens[0] : {},

        registry,

      ),

      mask: {
        padding: 2,
        updateMode: 'everyTick',

      },

    },
    sliderX: {
      track: { width: 20, radius: 10, color: COLOR_DARK },
      thumb: { radius: 13, color: COLOR_LIGHT },

      hideUnscrollableSlider: true,
      input: 'click',

    },
    sliderY: {
      track: { width: 20, radius: 10, color: COLOR_DARK },
      thumb: { radius: 13, color: COLOR_LIGHT },

      hideUnscrollableSlider: true,
      input: 'click',

    },
    scrollerX: false,
    scrollerY: false,
    space: {
      left: 10,
      right: 10,
      top: 10,
      bottom: 10,
      sliderX: 10,
      sliderY: 10,
    },

    header: CreateHeader(scene, objectTree[0], registry),

  };

  // const config2: ScrollablePanelConfig = {
  //   // width: 400,
  //   // height: 400,

  //   panel: {
  //     child: CreateColumnPanelsBox(
  //       scene,
  //       objekto ? objekto[0]?.children[0] : {},
  //     ),
  //     mask: {
  //       // padding: 2,
  //       updateMode: 'everyTick',
  //     },
  //   },
  //   sliderX: {
  //     track: { width: 20, radius: 10, color: COLOR_DARK },
  //     thumb: { radius: 13, color: COLOR_LIGHT },
  //     hideUnscrollableSlider: true,
  //     input: 'click',
  //   },
  //   sliderY: {
  //     track: { width: 20, radius: 10, color: COLOR_DARK },
  //     thumb: { radius: 13, color: COLOR_LIGHT },
  //     hideUnscrollableSlider: true,
  //     input: 'click',
  //   },
  //   scrollerX: true,
  //   scrollerY: true,
  //   space: {
  //     // left: 10,
  //     // right: 10,
  //     // top: 10,
  //     // bottom: 10,
  //     sliderX: 10,
  //     sliderY: 10,
  //   },
  //   header: CreateHeader(scene, objekto ? objekto[0]?.nomo?.enhavo : ''),
  // };

  // Создаем ScrollablePanel

  const scrollablePanel = scene.rexUI.add.scrollablePanel(config);

  // const scrollablePanel2 = scene.rexUI.add.scrollablePanel(config2);

  // Устанавливаем возможность перетаскивания
  scrollablePanel.setDraggable('header');

  // scrollablePanel2.setDraggable('header');

  // Вызываем метод layout для обновления компоновки
  scrollablePanel.layout();

  // scrollablePanel2.layout();

  // Добавляем контроллер для изменения размера

  AddResizeController(scrollablePanel);

  // AddResizeController(scrollablePanel2);

  // scrollablePanel.add(scrollablePanel2);

  return scrollablePanel;
};

export default CreateScrollablePanel;