import React from 'react';
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { createRoot } from '@wordpress/element';
import shortcode from '@wordpress/shortcode';
import { TITLE_DIALOG_ROOT_ID } from './index'; // Adjust the import path as needed
import { JustwatchProvider } from '../context/context';
import { TitleDialog } from '../components/title-dialog/TitleDialog';

// Mock TinyMCE and global dependencies
vi.mock('tinymce', () => ({
  PluginManager: {
    addComponents: vi.fn(),
    get: vi.fn(),
    load: vi.fn(),
    requireLangPack: vi.fn(),
    add: vi.fn(),
  },
}));

vi.mock('@wordpress/element', () => ({
  createRoot: vi.fn(() => ({
    render: vi.fn(),
  })),
}));

vi.mock('@wordpress/shortcode', () => ({
  string: vi.fn(({ tag, attrs }) => `[${tag} ${Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(' ')}]`),
}));

vi.mock('../components/title-dialog/TitleDialog', () =>
  vi.fn(({ isOpen, onClose, onConfirm }) => (
    <div>
      {isOpen && (
        <div>
          <button onClick={() => onClose()}>Close</button>
          <button onClick={() => onConfirm({ id: '123', objectType: 'movie' })}>Confirm</button>
        </div>
      )}
    </div>
  ))
);

vi.mock('../context/context', () => ({
  JustwatchProvider: vi.fn(({ children }) => <div>{children}</div>),
}));


describe.skip('classic-editor', () => {
  let editor: any;
  let plugin: any;
  let modalContainer: HTMLElement;

  beforeEach(() => {
    // Reset the DOM
    document.body.innerHTML = '';

    // Create a mock TinyMCE editor
    editor = {
      addCommand: vi.fn(),
      addButton: vi.fn(),
      insertContent: vi.fn(),
    };

    // Mock global justwatch settings
    window.justwatch = {
      settings: {
        apiKey: 'test-api-key',
        apiUrl: 'http://example.com/api',
        locale: 'en-US',
        theme: 'dark',
        maxOffers: 10,
        previewUrl: 'http://example.com/preview',
        offerLabel: 'Special Offer',
        brandedLinkTemplate: 'Source: {{justwatch}}',
        noOffersMessage: 'No offers available',
      },
      pluginUrl: 'http://example.com/plugin',
      locale: 'en-US',
      settingsUrl: 'http://example.com/settings',
    };

    // Create a container for the modal
    modalContainer = document.createElement('div');
    modalContainer.id = TITLE_DIALOG_ROOT_ID;
    document.body.appendChild(modalContainer);

    // Trigger the DOMContentLoaded event
    document.dispatchEvent(new Event('DOMContentLoaded'));
  });

  afterEach(() => {
    vi.clearAllMocks();
  });

  it('initializes the TinyMCE plugin', () => {
    expect(window.tinyMCE.PluginManager.add).toHaveBeenCalledWith('justwatch', expect.any(Function));
    expect(plugin).toBeDefined();
  });

  it('adds the Justwatch button to the TinyMCE toolbar', () => {
    expect(editor.addButton).toHaveBeenCalledWith('justwatch', {
      cmd: 'openJustwatchModal',
      image: 'http://example.com/plugin/../img/justwatch-icon.png',
    });
  });

  it('opens the modal when the button is clicked', () => {
    // Simulate the button click by calling the command
    const openModalCommand = editor.addCommand.mock.calls.find(([command]: [string]) => command === 'openJustwatchModal')[1];
    openModalCommand();

    // Check that the modal is rendered
    expect(createRoot).toHaveBeenCalledWith(modalContainer);
    expect(JustwatchProvider).toHaveBeenCalledWith(
      { children: expect.anything(), ...window.justwatch.settings },
      expect.anything()
    );
    expect(TitleDialog).toHaveBeenCalledWith(
      {
        isOpen: true,
        onClose: expect.any(Function),
        onConfirm: expect.any(Function),
      },
      expect.anything()
    );
  });

  it('inserts the shortcode into the editor when a title is confirmed', () => {
    // Simulate the button click by calling the command
    const openModalCommand = editor.addCommand.mock.calls.find(([command]: [string]) => command === 'openJustwatchModal')[1];
    openModalCommand();

    // Simulate confirming a title
    const onConfirm = vi.mocked(TitleDialog).mock.calls[0][0].onConfirm;
    onConfirm({ id: '123', objectType: 'movie' });

    // Check that the shortcode is inserted into the editor
    expect(shortcode.string).toHaveBeenCalledWith({
      tag: 'justwatch',
      attrs: {
        id: '123',
        'object-type': 'movie',
      },
    });
    expect(editor.insertContent).toHaveBeenCalledWith('&nbsp;[justwatch id="123" object-type="movie"]&nbsp;');
  });

  it('closes the modal when the close button is clicked', () => {
    // Simulate the button click by calling the command
    const openModalCommand = editor.addCommand.mock.calls.find(([command]: [string]) => command === 'openJustwatchModal')[1];
    openModalCommand();

    // Simulate closing the modal
    const onClose = vi.mocked(TitleDialog).mock.calls[0][0].onClose;
    onClose();

    // Check that the modal is closed
    expect(createRoot(
      modalContainer,

    ).render).toHaveBeenCalledWith(<></>);
  });
});