import { FlatList, StyleSheet, Text } from 'react-native';
import React from 'react';

import { fireEvent, render, RenderAPI } from '@testing-library/react-native';

import * as RichTextEditor__Event from '../RichTextEditor/Event';
import * as Events from '../../bindings/Events';
import RichTextEditor__MentionList from '../RichTextEditor/MentionList';
import noop from '../../helpers/noop';

const SuggestionListData: Array<{ id: number; name: string }> = [
  { id: 1, name: 'Kien Tran' },
  { id: 2, name: 'Minh Dinh' },
  { id: 3, name: 'Hieu Pham' },
  { id: 4, name: 'Hau' },
  { id: 5, name: 'Tung Ten' },
  { id: 6, name: 'Thong Quach' },
];

const SuggestionList = ({
  searchValue,
  onSelect,
}: {
  searchValue: string;
  onSelect: (id: string, name: string) => void;
}) => {
  const filteredData = SuggestionListData.filter(item => item.name.includes(searchValue));

  return (
    <FlatList
      keyboardShouldPersistTaps="handled"
      data={filteredData}
      renderItem={({ item }) => <Text onPress={() => onSelect(item.id, item.name)}>{item.name}</Text>}
    />
  );
};

describe('RichTextEditor__MentionList', () => {
  describe('when search string is empty', () => {
    it('should not render mention list', () => {
      const wrapper = render(
        <RichTextEditor__MentionList
          name="give-shout-out"
          render={() => {
            return <></>;
          }}
        />,
      );

      expect(wrapper.toJSON()).toBeNull();
    });
  });

  describe('when search string is not empty', () => {
    let wrapper: RenderAPI | undefined;
    beforeEach(() => {
      wrapper = render(
        <RichTextEditor__MentionList
          name="give-shout-out"
          render={(searchValue: string, onSelect: (id: string, name: string) => void) => (
            <SuggestionList searchValue={searchValue} onSelect={onSelect} />
          )}
        />,
      );
      RichTextEditor__Event.emitter.emit('give-shout-out/mention-search', { search: 'Hieu', target: 'give-shout-out' });
    });

    it('should render mention list showing filtered results', () => {
      expect(wrapper.toJSON()).toMatchSnapshot();
      expect(wrapper.queryAllByText('Hieu Pham')).toHaveLength(1);
      expect(wrapper.queryAllByText('Kien Tran')).toHaveLength(0);
      expect(wrapper.queryAllByText('Minh Dinh')).toHaveLength(0);
      expect(wrapper.queryAllByText('Hau')).toHaveLength(0);
      expect(wrapper.queryAllByText('Tung Teng')).toHaveLength(0);
      expect(wrapper.queryAllByText('Thong Quach')).toHaveLength(0);
    });

    describe('onPress suggesstion item', () => {
      it('should emit action metion-only', () => {
        const result = [];
        Events.on(RichTextEditor__Event.emitter, 'give-shout-out/mention-apply', (data: any) => {
          result.push(data);
        });
        fireEvent(wrapper.getByText('Hieu Pham'), 'press');
        expect(result).toMatchObject([{ id: 3, name: 'Hieu Pham', target: 'give-shout-out' }]);
      });
    });
  });
});