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 { usePickerStandalone } from './usePickerStandalone';

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

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

  let driver: WixPatternsContainerDriver;

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

  it('makes `filters` config option optional when there are no filters', () => {
    let searchValue: string | null = null;

    const App = () => {
      const { picker } = usePickerStandalone({
        queryName: 'test1',
        fetchData: async () => ({
          items: [] as TestEntity[],
        }),
        fetchErrorMessage: () => null,
        itemKey: (item) => item.id,
        itemName: (item) => item.name,
        defaultDestinationUrl: `https://manage.wix.com`,
      });

      searchValue = picker.collection.filters.search.value;

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

    expect(searchValue).toBe('');
  });

  it('makes `itemKey` & `itemName` config options optional when an item has an {id: string, name: string}', () => {
    const App = () => {
      const { picker } = usePickerStandalone({
        queryName: 'test2',
        fetchData: async () => ({
          items: [] as { id: string; name: string }[],
        }),
        fetchErrorMessage: () => null,
        defaultDestinationUrl: `https://manage.wix.com`,
      });

      const item = { id: 'foo', name: 'bar' };

      return (
        <>
          {picker.collection.itemKey(item)}
          {picker.collection.itemName(item)}
        </>
      );
    };
    const { container } = render(
      <CairoTestApp driver={driver}>
        <App />
      </CairoTestApp>,
    );

    expect(container.textContent).toBe('foobar');
  });

  it("makes `itemKey` config option required when an item doesn't extend {id: string}", () => {
    const App = () => {
      // @ts-expect-error - T does not extend { id: string }
      const { picker } = usePickerStandalone({
        queryName: 'test3',
        fetchData: async () => ({
          items: [] as { id2: string; name2: string }[],
        }),
        itemName: (item) => item.name2,
        fetchErrorMessage: () => null,
        defaultDestinationUrl: `https://manage.wix.com`,
      });

      try {
        return <>{picker.collection.itemKey({ id2: 'foo', name2: 'bar' })}</>;
      } catch (e) {
        return <>{(e as Error)?.message}</>;
      }
    };
    const { container } = render(
      <CairoTestApp driver={driver}>
        <App />
      </CairoTestApp>,
    );

    expect(container.textContent).toBe(
      'Collection config must specify itemKey, or item must have one of properties: id, _id',
    );
  });

  it("makes `itemName` config option required when an item doesn't extend {id: string}", () => {
    const App = () => {
      // @ts-expect-error - T does not extend { name: string }
      const { picker } = usePickerStandalone({
        queryName: 'test3',
        fetchData: async () => ({
          items: [] as { id2: string; name2: string }[],
        }),
        itemKey: (item) => item.id2,
        fetchErrorMessage: () => null,
        defaultDestinationUrl: `https://manage.wix.com`,
        noItemsAvailableDestinationUrl: 'https://wix.com',
      });

      try {
        return <>{picker.collection.itemName({ id2: 'foo', name2: 'bar' })}</>;
      } catch (e) {
        return <>{(e as Error)?.message}</>;
      }
    };
    const { container } = render(
      <CairoTestApp driver={driver}>
        <App />
      </CairoTestApp>,
    );

    expect(container.textContent).toBe(
      'Collection config must specify itemName, or item must have property: name',
    );
  });
});