---

import {
  CHART_DRAWING_TOOLBAR_CONTAINER,
  CHART_MODAL_CONTAINER_CLASSNAME,
  CHART_PANE_EMPTY_STATE_CONTAINER,
  CHART_PANE_OVERLAY_CONTAINER,
  CHART_ROOT_CLASSNAME,
} from '@src/constants';

import { ContainerManager } from '../ContainerManager';

jest.mock('@src/constants', () => ({
  CHART_DRAWING_TOOLBAR_CONTAINER: 'chart-drawing-toolbar-container',
  CHART_MODAL_CONTAINER_CLASSNAME: 'chart-modal-container',
  CHART_PANE_EMPTY_STATE_CONTAINER: 'chart-pane-empty-state-container',
  CHART_PANE_OVERLAY_CONTAINER: 'chart-pane-overlay-container',
  CHART_ROOT_CLASSNAME: 'chart-root',
}));

describe('ContainerManager', () => {
  let parentContainer: HTMLDivElement;

  beforeEach(() => {
    document.querySelectorAll('link[href*="fonts.googleapis.com"]').forEach((link) => link.remove());

    parentContainer = document.createElement('div');
    document.body.appendChild(parentContainer);
  });

  afterEach(() => {
    parentContainer.remove();
  });

  describe('createContainers', () => {
    it('должен создавать основные контейнеры графика с корректной структурой', () => {
      const {
        headerContainer,
        footerContainer,
        chartContainer,
        chartAreaContainer,
        toolBarContainer,
        modalContainer,
        controlBarContainer,
        drawingToolbarContainer,
      } = ContainerManager.createContainers({
        parentContainer,
        showBottomPanel: true,
        showMenuButton: true,
      });

      expect(parentContainer.classList.contains(CHART_ROOT_CLASSNAME)).toBe(true);
      expect(parentContainer.children[0]).toBe(headerContainer);
      expect(parentContainer.children[1]).toBe(chartContainer);
      expect(parentContainer.children[2]).toBe(footerContainer);

      expect(chartContainer.contains(toolBarContainer)).toBe(true);
      expect(chartContainer.contains(chartAreaContainer)).toBe(true);
      expect(chartContainer.contains(modalContainer)).toBe(true);

      expect(chartAreaContainer.contains(controlBarContainer)).toBe(true);
      expect(chartAreaContainer.contains(drawingToolbarContainer)).toBe(true);

      expect(drawingToolbarContainer.classList.contains(CHART_DRAWING_TOOLBAR_CONTAINER)).toBe(true);
      expect(modalContainer.classList.contains(CHART_MODAL_CONTAINER_CLASSNAME)).toBe(true);
      expect(modalContainer.hidden).toBe(true);
    });

    it('должен создавать сетку с нижней панелью', () => {
      ContainerManager.createContainers({
        parentContainer,
        showBottomPanel: true,
        showMenuButton: true,
      });

      expect(parentContainer.style.gridTemplateRows).toBe('36px minmax(0, 1fr) 32px');
    });

    it('должен создавать сетку без нижней панели', () => {
      const { footerContainer } = ContainerManager.createContainers({
        parentContainer,
        showBottomPanel: false,
        showMenuButton: true,
      });

      expect(parentContainer.style.gridTemplateRows).toBe('36px minmax(0, 1fr)');
      expect(parentContainer.contains(footerContainer)).toBe(false);
    });

    it('должен отображать панель инструментов при включённой кнопке меню', () => {
      const { chartContainer, toolBarContainer } = ContainerManager.createContainers({
        parentContainer,
        showMenuButton: true,
      });

      expect(chartContainer.contains(toolBarContainer)).toBe(true);
      expect(chartContainer.style.gridTemplateColumns).toBe('42px minmax(0, 1fr)');
    });

    it('должен скрывать панель инструментов при выключенной кнопке меню', () => {
      const { chartContainer, toolBarContainer } = ContainerManager.createContainers({
        parentContainer,
        showMenuButton: false,
      });

      expect(chartContainer.contains(toolBarContainer)).toBe(false);
      expect(chartContainer.style.gridTemplateColumns).toBe('minmax(0, 1fr)');
    });

    it('должен переключать видимость панели инструментов', () => {
      const { chartContainer, toolBarContainer, toggleToolbar } = ContainerManager.createContainers({
        parentContainer,
        showMenuButton: true,
      });

      expect(toggleToolbar()).toBe(false);
      expect(chartContainer.contains(toolBarContainer)).toBe(false);
      expect(chartContainer.style.gridTemplateColumns).toBe('minmax(0, 1fr)');

      expect(toggleToolbar()).toBe(true);
      expect(chartContainer.contains(toolBarContainer)).toBe(true);
      expect(chartContainer.style.gridTemplateColumns).toBe('42px minmax(0, 1fr)');
    });

    it('должен удалять старое содержимое перед созданием контейнеров', () => {
      const oldElement = document.createElement('div');
      parentContainer.appendChild(oldElement);

      ContainerManager.createContainers({
        parentContainer,
        showMenuButton: true,
      });

      expect(parentContainer.contains(oldElement)).toBe(false);
    });

    it('должен добавлять шрифт только один раз', () => {
      ContainerManager.createContainers({
        parentContainer,
        showMenuButton: true,
      });

      ContainerManager.createContainers({
        parentContainer,
        showMenuButton: true,
      });

      const fontLinks = document.querySelectorAll('link[href*="fonts.googleapis.com"]');

      expect(fontLinks).toHaveLength(1);
    });
  });

  describe('createPaneContainers', () => {
    it('должен создавать контейнеры pane с корректными настройками', () => {
      const { legendContainer, paneOverlayContainer, paneEmptyStateContainer } =
        ContainerManager.createPaneContainers();

      expect(legendContainer.style.position).toBe('absolute');
      expect(legendContainer.style.pointerEvents).toBe('none');

      expect(paneOverlayContainer.classList.contains(CHART_PANE_OVERLAY_CONTAINER)).toBe(true);
      expect(paneOverlayContainer.style.position).toBe('absolute');
      expect(paneOverlayContainer.style.inset).toBe('0');
      expect(paneOverlayContainer.style.pointerEvents).toBe('none');

      expect(paneEmptyStateContainer.classList.contains(CHART_PANE_EMPTY_STATE_CONTAINER)).toBe(true);
      expect(paneEmptyStateContainer.hidden).toBe(true);
    });

    it('должен создавать отдельные контейнеры для каждого pane', () => {
      const first = ContainerManager.createPaneContainers();
      const second = ContainerManager.createPaneContainers();

      expect(first.legendContainer).not.toBe(second.legendContainer);
      expect(first.paneOverlayContainer).not.toBe(second.paneOverlayContainer);
      expect(first.paneEmptyStateContainer).not.toBe(second.paneEmptyStateContainer);
    });
  });

  describe('clearContainers', () => {
    it('должен очищать содержимое контейнера', () => {
      parentContainer.innerHTML = '<div>content</div>';

      ContainerManager.clearContainers(parentContainer);

      expect(parentContainer.innerHTML).toBe('');
    });
  });
});

















jest.mock('@src/translations', () => {
  const actual = jest.requireActual<typeof import('@src/translations')>('@src/translations');

  return {
    ...actual,
    t: (key: string) => key,
  };
});

















jest.mock('@src/utils', () => {
  const actual = jest.requireActual<typeof import('@src/utils')>('@src/utils');

  return {
    ...actual,
    applyNextIndicatorColors: jest.fn((config) => config),
    getIndicatorColors: jest.fn(() => []),
  };
});