import { expect, tap } from '@git.zone/tstest/tapbundle';

import * as socialioCatalog from '../ts_web/index.js';

tap.test('render combox component', async () => {
  // Create and add combox
  const combox = new socialioCatalog.SioCombox();
  combox.style.position = 'relative';
  combox.style.width = '800px';
  combox.style.height = '600px';
  document.body.appendChild(combox);
  
  await combox.updateComplete;
  
  expect(combox).toBeInstanceOf(socialioCatalog.SioCombox);
  
  // Check that the component rendered its content
  const container = combox.shadowRoot.querySelector('.container');
  expect(container).toBeTruthy();
  
  const conversationSelector = combox.shadowRoot.querySelector('sio-conversation-selector');
  expect(conversationSelector).toBeTruthy();
  
  const conversationView = combox.shadowRoot.querySelector('sio-conversation-view');
  expect(conversationView).toBeTruthy();
  
  console.log('Combox component rendered successfully with all main elements');
  
  document.body.removeChild(combox);
});

tap.test('render fab component', async () => {
  // Create and add fab
  const fab = new socialioCatalog.SioFab();
  document.body.appendChild(fab);
  
  await fab.updateComplete;
  expect(fab).toBeInstanceOf(socialioCatalog.SioFab);
  
  // Check main elements
  const mainbox = fab.shadowRoot.querySelector('#mainbox');
  expect(mainbox).toBeTruthy();
  
  console.log('FAB component rendered successfully');
  
  document.body.removeChild(fab);
});

tap.test('render image lightbox component', async () => {
  // Create and add lightbox
  const lightbox = new socialioCatalog.SioImageLightbox();
  document.body.appendChild(lightbox);
  
  await lightbox.updateComplete;
  expect(lightbox).toBeInstanceOf(socialioCatalog.SioImageLightbox);
  
  // Check main elements
  const overlay = lightbox.shadowRoot.querySelector('.overlay');
  expect(overlay).toBeTruthy();
  
  const container = lightbox.shadowRoot.querySelector('.container');
  expect(container).toBeTruthy();
  
  // Test opening with an image
  await lightbox.open({
    url: 'https://picsum.photos/800/600',
    name: 'Test Image',
    size: 123456
  });
  
  await lightbox.updateComplete;
  expect(lightbox.isOpen).toEqual(true);
  
  console.log('Image lightbox component rendered successfully');
  
  document.body.removeChild(lightbox);
});

tap.start();