import React from 'react';
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

import { DEFAULT_ITEMS_PER_PAGE_OPTIONS } from '../constants';
import { DEFAULT_LGID_ROOT, getLgIds } from '../getLgIds';

import PaginationRangeView from '.';

describe('PaginationRangeView', () => {
  describe('a11y', () => {
    test('does not have basic accessibility issues', async () => {
      const { container } = render(
        <PaginationRangeView
          itemsPerPage={10}
          currentPage={1}
          numTotalItems={100}
        />,
      );
      const results = await axe(container);
      expect(results).toHaveNoViolations();
    });
  });

  describe('item range display', () => {
    test('renders "of many" when numTotalItems is undefined', () => {
      const { getByTestId } = render(
        <PaginationRangeView itemsPerPage={10} currentPage={1} />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '1 - 10 of many',
      );
    });

    test('renders correct item range with numTotalItems', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={10}
          currentPage={1}
          numTotalItems={1021}
        />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '1 - 10 of 1021 items',
      );
    });

    test('renders correct range for second page', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={10}
          currentPage={2}
          numTotalItems={1021}
        />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '11 - 20 of 1021 items',
      );
    });

    test('renders correct range for middle page', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={10}
          currentPage={5}
          numTotalItems={1021}
        />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '41 - 50 of 1021 items',
      );
    });

    test('renders correct range for last page with partial items', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={10}
          currentPage={103}
          numTotalItems={1021}
        />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '1021 - 1021 of 1021 items',
      );
    });
  });

  describe('different itemsPerPage values', () => {
    test('renders correct range with 25 items per page', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={25}
          currentPage={1}
          numTotalItems={100}
        />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '1 - 25 of 100 items',
      );
    });

    test('renders correct range with 50 items per page', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={50}
          currentPage={1}
          numTotalItems={1021}
        />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '1 - 50 of 1021 items',
      );
    });

    test('renders correct range with 50 items per page on page 2', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={50}
          currentPage={2}
          numTotalItems={1021}
        />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '51 - 100 of 1021 items',
      );
    });

    test('renders correct range with 100 items per page', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={100}
          currentPage={1}
          numTotalItems={1021}
        />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '1 - 100 of 1021 items',
      );
    });
  });

  describe('default values', () => {
    test('uses default itemsPerPage when not provided', () => {
      const currentPage = 1;
      const numTotalItems = 100;

      const { getByTestId } = render(
        <PaginationRangeView
          currentPage={currentPage}
          numTotalItems={numTotalItems}
        />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        `${currentPage} - ${DEFAULT_ITEMS_PER_PAGE_OPTIONS[0]} of ${numTotalItems} items`,
      );
    });

    test('uses default currentPage when not provided', () => {
      const { getByTestId } = render(
        <PaginationRangeView itemsPerPage={10} numTotalItems={100} />,
      );
      // Default currentPage is 1
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '1 - 10 of 100 items',
      );
    });
  });

  describe('edge cases', () => {
    test('renders "0 - 0 of 0 items" when numTotalItems is 0', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={10}
          currentPage={1}
          numTotalItems={0}
        />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '0 - 0 of 0 items',
      );
    });

    test('handles small total items', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={10}
          currentPage={1}
          numTotalItems={5}
        />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '1 - 5 of 5 items',
      );
    });

    test('handles single item', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={10}
          currentPage={1}
          numTotalItems={1}
        />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '1 - 1 of 1 item',
      );
    });

    test('handles exact page boundary', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={10}
          currentPage={10}
          numTotalItems={100}
        />,
      );
      expect(getByTestId('lg-pagination-item-range').textContent).toBe(
        '91 - 100 of 100 items',
      );
    });
  });

  describe('lgid props', () => {
    const defaultLgIds = getLgIds();

    test('renders default lgid values when data-lgid is not provided', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={10}
          currentPage={1}
          numTotalItems={100}
        />,
      );

      expect(getByTestId(defaultLgIds.summary)).toBeInTheDocument();
    });

    test('renders default data-lgid attribute when data-lgid is not provided', () => {
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={10}
          currentPage={1}
          numTotalItems={100}
        />,
      );

      expect(getByTestId(defaultLgIds.summary)).toHaveAttribute(
        'data-lgid',
        `${DEFAULT_LGID_ROOT}-summary`,
      );
    });

    test('renders custom lgid value when data-lgid is provided', () => {
      const customLgId = 'lg-my-pagination';
      const customLgIds = getLgIds(customLgId);
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={10}
          currentPage={1}
          numTotalItems={100}
          data-lgid={customLgId}
        />,
      );

      expect(getByTestId(customLgIds.summary)).toBeInTheDocument();
    });

    test('renders custom data-lgid attribute when data-lgid is provided', () => {
      const customLgId = 'lg-my-pagination';
      const customLgIds = getLgIds(customLgId);
      const { getByTestId } = render(
        <PaginationRangeView
          itemsPerPage={10}
          currentPage={1}
          numTotalItems={100}
          data-lgid={customLgId}
        />,
      );

      expect(getByTestId(customLgIds.summary)).toHaveAttribute(
        'data-lgid',
        `${customLgId}-summary`,
      );
    });
  });
});