import * as React from 'react';
import { customRender, fireEvent, waitForElement } from 'test-utils';
import { Table, Td, Tr, Thead, Th, Sortable, BatchSelect } from '../index';

const mockData = [
  {
    id: 1,
    name: 'Item 1',
    color: 'red',
  },
  {
    id: 2,
    name: 'Item 2',
    color: 'green',
  },
  {
    id: 3,
    name: 'Item 3',
    color: 'blue',
  },
  {
    id: 4,
    name: 'Item 4',
    color: 'purple',
  },
];

describe('<Table />', () => {
  describe('Feature Sorting', () => {
    beforeEach(() => {
      jest.resetAllMocks();
    });

    const renderRow = (item: { id: any; name: any }) => (
      <Tr key={item.id}>
        <Td>{item.id}</Td>
        <Td>{item.name}</Td>
      </Tr>
    );

    it('should cycle through the sort states correctly', async () => {
      const MockTable = () => {
        const { getSortingDirection, toggleSort } = Sortable.useSortable();
        return (
          <Table>
            <Thead>
              <Tr>
                <Sortable.Th
                  onClick={() => {
                    toggleSort('id');
                  }}
                  direction={getSortingDirection('id')}
                  title={`Sort id ${getSortingDirection('id')}`}
                >
                  id
                </Sortable.Th>
                <Sortable.Th
                  onClick={() => {
                    toggleSort('name');
                  }}
                  direction={getSortingDirection('name')}
                  title={`Sort name ${getSortingDirection('name')}`}
                >
                  name
                </Sortable.Th>
              </Tr>
            </Thead>
            <tbody>{mockData.map(renderRow)}</tbody>
          </Table>
        );
      };
      const { getByTitle } = customRender(<MockTable />);

      fireEvent.click(getByTitle('Sort id unsorted'));
      await waitForElement(() => getByTitle('Sort id asc'));
      fireEvent.click(getByTitle('Sort id asc'));

      await waitForElement(() => getByTitle('Sort id desc'));

      fireEvent.click(getByTitle('Sort id desc'));
      await waitForElement(() => getByTitle('Sort id unsorted'));
    });

    it('should set initial sorting', () => {
      const MockTable = () => {
        const { getSortingDirection } = Sortable.useSortable('id', 'desc');
        return (
          <Table>
            <Thead>
              <Tr>
                <Sortable.Th
                  direction={getSortingDirection('id')}
                  title={`Sort id ${getSortingDirection('id')}`}
                >
                  id
                </Sortable.Th>
                <Sortable.Th
                  direction={getSortingDirection('name')}
                  title={`Sort name ${getSortingDirection('name')}`}
                >
                  name
                </Sortable.Th>
              </Tr>
            </Thead>
            <tbody>{mockData.map(renderRow)}</tbody>
          </Table>
        );
      };

      const { getByTitle } = customRender(<MockTable />);

      getByTitle('Sort id desc');
      getByTitle('Sort name unsorted');
    });

    it('should reset other sorts when I click on a new sort', async () => {
      const MockTable = () => {
        const { getSortingDirection, toggleSort } = Sortable.useSortable('id', 'desc');
        return (
          <Table>
            <Thead>
              <Tr>
                <Sortable.Th
                  title={`Sort id ${getSortingDirection('id')}`}
                  direction={getSortingDirection('id')}
                  onClick={() => toggleSort('id')}
                >
                  id
                </Sortable.Th>
                <Sortable.Th
                  title={`Sort name ${getSortingDirection('name')}`}
                  direction={getSortingDirection('name')}
                  onClick={() => toggleSort('name')}
                >
                  name
                </Sortable.Th>
              </Tr>
            </Thead>
            <tbody>{mockData.map(renderRow)}</tbody>
          </Table>
        );
      };
      const { getByTitle } = customRender(<MockTable />);

      // Click on the name sort, which is currently unsorted.
      fireEvent.click(getByTitle('Sort name unsorted'));

      // Since id was previously sorted by `desc` order, it'll fallback to unsorted
      // due to the fact `name` is now getting the sort.
      await waitForElement(() => getByTitle('Sort id unsorted'));

      // Name should've cycled through to the `asc` sort.
      getByTitle('Sort name asc');
    });
  });

  describe('Feature Bulk', () => {
    // eslint-disable-next-line react/prop-types
    const BulkTable: React.FC<{
      innerGroup?: React.ReactNode;
      selectedItemsText?: React.ReactNode | ((s: string | number) => React.ReactNode);
      outerGroup?: React.ReactNode;
    }> = ({ innerGroup, selectedItemsText, outerGroup }) => {
      const {
        isItemSelected,
        toggleItem,
        itemsSelectedCount,
        isAllItemsSelected,
        isPartiallySelected,
        toggleAllItems,
      } = BatchSelect.useBatchSelect(mockData);

      const nextSelectedItems =
        typeof selectedItemsText === 'function'
          ? selectedItemsText(itemsSelectedCount)
          : selectedItemsText;
      return (
        <Table>
          <Thead>
            <BatchSelect.HeaderTr
              selectedItemsText={
                nextSelectedItems ||
                `${itemsSelectedCount} selected item${itemsSelectedCount > 1 ? 's' : ''}`
              }
              itemsSelectedCount={itemsSelectedCount}
              checkboxProps={{
                checked: isAllItemsSelected,
                indeterminate: isPartiallySelected,
                onChange: toggleAllItems,
                alt: isPartiallySelected ? 'Deselect All Items' : 'Select All Items',
              }}
              innerGroup={innerGroup}
              outerGroup={outerGroup}
            >
              <Th>name</Th>
              <Th>color</Th>
            </BatchSelect.HeaderTr>
          </Thead>
          <tbody>
            {mockData.map(item => (
              <BatchSelect.Tr
                selected={isItemSelected(item.id)}
                key={item.id}
                checkboxProps={{
                  checked: isItemSelected(item.id),
                  alt: `Select item ${item.id}`,
                  onChange: () => {
                    toggleItem(item.id);
                  },
                }}
              >
                <Td>{item.name}</Td>
                <Td>{item.color}</Td>
              </BatchSelect.Tr>
            ))}
          </tbody>
        </Table>
      );
    };
    it('should have rendered the select item checkboxes', async () => {
      const { getByAltText } = customRender(<BulkTable />);

      getByAltText('Select All Items');
      getByAltText('Select item 1');
      getByAltText('Select item 2');
      getByAltText('Select item 3');
      getByAltText('Select item 4');
    });

    it('should display a deselect all items checkbox if at least 1 item is selected', async () => {
      const { getByAltText } = customRender(<BulkTable />);

      fireEvent.click(getByAltText('Select item 1'));
      await waitForElement(() => getByAltText('Deselect All Items'));
    });

    it('should change the headers checkbox text according to the number of items selected', async () => {
      const { getByAltText, getByText } = customRender(<BulkTable />);

      fireEvent.click(getByAltText('Select item 1'));
      await waitForElement(() => getByText('1 selected item'));

      fireEvent.click(getByAltText('Select item 2'));
      await waitForElement(() => getByText('2 selected items'));
    });

    it('should be possible to pass in your own text that displays how many items are selected', async () => {
      const { getByAltText, getByText } = customRender(
        <BulkTable selectedItemsText="whatever text you want" />,
      );

      fireEvent.click(getByAltText('Select item 1'));
      await waitForElement(() => getByText('whatever text you want'));
    });

    it('should be possible to pass in your own function to the selectedItemsText', async () => {
      const { getByAltText, getByText } = customRender(
        <BulkTable selectedItemsText={items => `you picked ${items} item`} />,
      );

      fireEvent.click(getByAltText('Select item 1'));
      await waitForElement(() => getByText('you picked 1 item'));
    });

    it('should be possible to pass in your own react node to the selectedItemsText', async () => {
      const { getByAltText, getByText, getByTestId } = customRender(
        <BulkTable
          selectedItemsText={items => (
            <span data-testid="my-custom-component">you have chosen {items} items</span>
          )}
        />,
      );

      fireEvent.click(getByAltText('Select item 1'));
      await waitForElement(() => getByText('you have chosen 1 items'));

      fireEvent.click(getByAltText('Select item 2'));
      await waitForElement(() => getByText('you have chosen 2 items'));
      getByTestId('my-custom-component');
    });

    it('should render our custom innerGroup and outerGroup when at least 1 or more items selected', async () => {
      const { getByText, getByAltText } = customRender(
        <BulkTable
          innerGroup={<div>My Inner Group Item</div>}
          outerGroup={<div>My Outer Group Item</div>}
        />,
      );

      fireEvent.click(getByAltText('Select item 1'));
      await waitForElement(() => getByText('My Inner Group Item'));
      await waitForElement(() => getByText('My Outer Group Item'));
    });

    it('should render the batch dropdown', async () => {
      const { getByText, getByAltText, queryByText } = customRender(
        <BulkTable
          innerGroup={
            <BatchSelect.Dropdown title="Actions">
              {({ toggleOpen }) => (
                <BatchSelect.DropdownList>
                  <li>A list item</li>
                  <li>Another list item</li>
                  <li>
                    <button type="button" onClick={toggleOpen}>
                      This should close the dropdown list
                    </button>
                  </li>
                </BatchSelect.DropdownList>
              )}
            </BatchSelect.Dropdown>
          }
        />,
      );

      fireEvent.click(getByAltText('Select item 1'));
      await waitForElement(() => getByText('Actions'));

      // Initially, the items within the dropdown should not have been rendered.
      expect(queryByText('Another list item')).toBeNull();

      // Clicking on the dropdown button should open up our list
      fireEvent.click(getByText('Actions'));
      await waitForElement(() => getByText('Another list item'));

      // Clicking on the an element with the toggleOpen function hooked onto it
      // should have closed our dropdown
      fireEvent.click(getByText('This should close the dropdown list'));
      expect(queryByText('Another list item')).toBeNull();
    });
  });
});