import { render } from '@testing-library/react';
import React from 'react';
import { CairoTestApp } from '../../test-utils';
import { testkit } from '@wix/fe-essentials-standalone/testkit';
import { WixPatternsContainerDriver } from '@wix/bex-core/testkit/internal';
import { usePickerContent } from './usePickerContent';
import { usePickerModal } from '../usePickerModal';

interface TestEntity {
  id: string;
  name: string;
}

describe('usePickerContent', () => {
  testkit.beforeAndAfter();

  let driver: WixPatternsContainerDriver;

  beforeEach(() => {
    driver = new WixPatternsContainerDriver();
  });

  it('allows optional options', () => {
    const App = () => {
      const modalState = usePickerModal({
        queryName: 'usePickerModal-test',
        biLoggerFactory: driver.biLoggerFactory,
        environment: driver.environment,
        errorMonitor: driver.errorMonitor,
        fetchData: async () => ({
          items: [] as TestEntity[],
        }),
        pickerContentComponent: async () => ({ default: () => <div /> }),
        onSelect: jest.fn(),
      });

      usePickerContent({
        modalState,
        fetchErrorMessage: () => null,
      });

      return null;
    };
    render(
      <CairoTestApp driver={driver}>
        <App />
      </CairoTestApp>,
    );
  });

  it('expects errors when required options are missing', () => {
    const App = () => {
      const modalState = usePickerModal({
        queryName: 'usePickerModal-test',
        biLoggerFactory: driver.biLoggerFactory,
        environment: driver.environment,
        errorMonitor: driver.errorMonitor,
        fetchData: async () => ({
          items: [] as TestEntity[],
        }),
        filters: {
          level: { initialValue: ['Ultimate'] },
        },
        pickerContentComponent: async () => ({ default: () => <div /> }),
        onSelect: jest.fn(),
      });

      usePickerContent(
        // @ts-expect-error
        {
          modalState,
          fetchErrorMessage: () => null,
        },
      );

      return null;
    };
    render(
      <CairoTestApp driver={driver}>
        <App />
      </CairoTestApp>,
    );
  });
});