import { selectors } from '@defencedigital/design-tokens';
import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { fireEvent, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { TabSet, TabSetItem } from '.';
var color = selectors.color;
describe('TabSet', function () {
  var wrapper;
  var onChangeSpy;
  describe('when the tab set is not scrollable', function () {
    describe('when all props are provided', function () {
      beforeEach(function () {
        var props = {
          className: 'rn-tab-set--modifier',
          'data-arbitrary': 'arbitrary',
          onChange: function onChange() {
            return true;
          }
        };
        onChangeSpy = jest.spyOn(props, 'onChange');
        wrapper = render( /*#__PURE__*/React.createElement(TabSet, props, /*#__PURE__*/React.createElement(TabSetItem, {
          "data-arbitrary": "arbitrary-tab",
          title: "Title 1"
        }, "Content 1"), /*#__PURE__*/React.createElement(TabSetItem, {
          title: "Title 2"
        }, "Content 2")));
      });
      it('should spread arbitrary props on the tab set', function () {
        expect(wrapper.getByTestId('tab-set')).toHaveAttribute('data-arbitrary', 'arbitrary');
      });
      it('should spread arbitrary props on the tab', function () {
        expect(wrapper.getAllByTestId('tab-set-content')[0]).toHaveAttribute('data-arbitrary', 'arbitrary-tab');
      });
      it('should give tabs an appropriate accessible name', function () {
        expect(wrapper.getByRole('tab', {
          name: 'Title 1'
        })).toBeInTheDocument();
      });
      it('should apply the correct roles', function () {
        expect(wrapper.getByTestId('tab-set-list')).toHaveAttribute('role', 'tablist');
        expect(wrapper.getAllByTestId('tab-set-tab')[0]).toHaveAttribute('role', 'presentation');
        expect(wrapper.getAllByTestId('tab-set-tab-button')[0]).toHaveAttribute('role', 'tab');
        expect(wrapper.getAllByTestId('tab-set-content')[0]).toHaveAttribute('role', 'tabpanel');
      });
      it('should set the `aria-labelledby` and `id` attributes to the ID of the tab', function () {
        var tabButton0 = wrapper.getAllByTestId('tab-set-tab-button')[0];
        var tabButtonId0 = tabButton0.getAttribute('id');
        var tabContentId0 = tabButton0.getAttribute('aria-controls');
        expect(wrapper.getAllByTestId('tab-set-content')[0]).toHaveAttribute('aria-labelledby', tabButtonId0);
        expect(wrapper.getAllByTestId('tab-set-content')[0]).toHaveAttribute('id', tabContentId0);
        var tabButton1 = wrapper.getAllByTestId('tab-set-tab-button')[1];
        var tabButtonId1 = tabButton1.getAttribute('id');
        var tabContentId1 = tabButton1.getAttribute('aria-controls');
        expect(wrapper.getAllByTestId('tab-set-content')[1]).toHaveAttribute('aria-labelledby', tabButtonId1);
        expect(wrapper.getAllByTestId('tab-set-content')[1]).toHaveAttribute('id', tabContentId1);
      });
      it('should add the class name', function () {
        expect(wrapper.getByTestId('tab-set').classList).toContain('rn-tab-set--modifier');
      });
      it('should output the correct number of tabs', function () {
        expect(wrapper.queryAllByTestId('tab-set-tab').length).toEqual(2);
      });
      it('should output the correct number of content panels', function () {
        expect(wrapper.queryAllByTestId('tab-set-content').length).toEqual(2);
      });
      it('should set the `tabIndex` values correctly', function () {
        expect(wrapper.getAllByTestId('tab-set-tab-button')[0]).toHaveAttribute('tabIndex', '0');
        expect(wrapper.getAllByTestId('tab-set-tab-button')[1]).toHaveAttribute('tabIndex', '-1');
      });
      it('should set the `aria-hidden` attributes correctly', function () {
        expect(wrapper.getAllByTestId('tab-set-content')[0]).toHaveAttribute('aria-hidden', 'false');
        expect(wrapper.getAllByTestId('tab-set-content')[1]).toHaveAttribute('aria-hidden', 'true');
      });
      describe('when the user clicks on a tab', function () {
        beforeEach(function () {
          return userEvent.click(wrapper.getAllByText('Title 2')[0]);
        });
        it('should display the tab as active', function () {
          var tab = wrapper.getAllByText('Title 2')[0].parentElement;
          expect(tab).toHaveStyleRule('background-color', color('neutral', 'white'));
        });
        it('should invoke the onChange function', function () {
          expect(onChangeSpy).toHaveBeenCalledTimes(1);
          expect(onChangeSpy).toHaveBeenCalledWith(expect.objectContaining({
            _reactName: 'onClick'
          }), 1);
        });
        it('should set the first tab `tabIndex` to -1', function () {
          expect(wrapper.getAllByTestId('tab-set-tab-button')[0]).toHaveAttribute('tabIndex', '-1');
          expect(wrapper.getAllByTestId('tab-set-tab-button')[1]).toHaveAttribute('tabIndex', '0');
        });
        it('should set the `aria-hidden` attributes correctly', function () {
          expect(wrapper.getAllByTestId('tab-set-content')[0]).toHaveAttribute('aria-hidden', 'true');
          expect(wrapper.getAllByTestId('tab-set-content')[1]).toHaveAttribute('aria-hidden', 'false');
        });
        describe('and the user presses the left arrow key', function () {
          beforeEach(function () {
            return userEvent.keyboard('[ArrowLeft]');
          });
          it('sets the previous tab to active', function () {
            var tab = wrapper.getAllByText('Title 1')[0].parentElement;
            expect(tab).toHaveStyleRule('background-color', color('neutral', 'white'));
          });
          describe('and the user presses the right arrow key', function () {
            beforeEach(function () {
              return userEvent.keyboard('[ArrowRight]');
            });
            it('sets the next tab to active', function () {
              var tab = wrapper.getAllByText('Title 2')[0].parentElement;
              expect(tab).toHaveStyleRule('background-color', color('neutral', 'white'));
            });
          });
        });
      });
    });
    describe('when the onChange is not provided', function () {
      beforeEach(function () {
        wrapper = render( /*#__PURE__*/React.createElement(TabSet, null, /*#__PURE__*/React.createElement(TabSetItem, {
          title: "Title 1"
        }, "Content 1"), /*#__PURE__*/React.createElement(TabSetItem, {
          title: "Title 2"
        }, "Content 2")));
      });
      describe('when the user clicks on a tab', function () {
        beforeEach(function () {
          return userEvent.click(wrapper.getAllByText('Title 2')[0]);
        });
        it('should make the appropriate tab active', function () {
          var tab = wrapper.getAllByText('Title 2')[0].parentElement;
          expect(tab).toHaveStyleRule('background-color', color('neutral', 'white'));
        });
      });
    });
    describe('when the initialActiveTab is set', function () {
      beforeEach(function () {
        wrapper = render( /*#__PURE__*/React.createElement(TabSet, null, /*#__PURE__*/React.createElement(TabSetItem, {
          title: "Title 1"
        }, "Content 1"), /*#__PURE__*/React.createElement(TabSetItem, {
          title: "Title 2",
          isActive: true
        }, "Content 2")));
      });
      it('should make the appropriate tab active', function () {
        var tab1 = wrapper.getAllByText('Title 1')[0].parentElement;
        var tab2 = wrapper.getAllByText('Title 2')[0].parentElement;
        expect(tab1).toHaveStyleRule('background-color', color('neutral', '100'));
        expect(tab2).toHaveStyleRule('background-color', color('neutral', 'white'));
      });
      describe('when the user clicks on a tab', function () {
        beforeEach(function () {
          return userEvent.click(wrapper.getAllByText('Title 1')[0]);
        });
        it('should make the appropriate tab active', function () {
          var tab1 = wrapper.getAllByText('Title 1')[0].parentElement;
          var tab2 = wrapper.getAllByText('Title 2')[0].parentElement;
          expect(tab1).toHaveStyleRule('background-color', color('neutral', 'white'));
          expect(tab2).toHaveStyleRule('background-color', color('neutral', '100'));
        });
      });
    });
    describe('when the TabSet is wrapped in a form', function () {
      var clickEventSpy;
      beforeEach(function () {
        wrapper = render( /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement(TabSet, null, /*#__PURE__*/React.createElement(TabSetItem, {
          title: "Title 1"
        }, "Content 1"), /*#__PURE__*/React.createElement(TabSetItem, {
          title: "Title 2"
        }, "Content 2"))));
      });
      describe('when the user clicks on a tab', function () {
        beforeEach(function () {
          clickEventSpy = new MouseEvent('click', {
            bubbles: true,
            cancelable: true
          });
          Object.assign(clickEventSpy, {
            preventDefault: jest.fn()
          });
          fireEvent(wrapper.getAllByText('Title 2')[0].parentElement, clickEventSpy);
        });
        it('should invoke preventDefault', function () {
          expect(clickEventSpy.preventDefault).toHaveBeenCalledTimes(1);
        });
      });
    });
    describe('when tabs contain elements', function () {
      beforeEach(function () {
        wrapper = render( /*#__PURE__*/React.createElement(TabSet, null, /*#__PURE__*/React.createElement(TabSetItem, {
          title: /*#__PURE__*/React.createElement("span", null, "Title 1")
        }, /*#__PURE__*/React.createElement("p", null, "Content 1")), /*#__PURE__*/React.createElement(TabSetItem, {
          title: /*#__PURE__*/React.createElement("span", null, "Title 2")
        }, /*#__PURE__*/React.createElement("p", null, "Content 2"))));
      });
      it('should render the elements', function () {
        expect(wrapper.getAllByText('Title 1')[0]).toBeInTheDocument();
        expect(wrapper.getByText('Content 1')).toBeInTheDocument();
        expect(wrapper.getAllByText('Title 2')[0]).toBeInTheDocument();
        expect(wrapper.getByText('Content 2')).toBeInTheDocument();
      });
    });
  });
  describe('when the tab set is scrollable', function () {
    beforeEach(function () {
      wrapper = render( /*#__PURE__*/React.createElement(TabSet, {
        isScrollable: true
      }, /*#__PURE__*/React.createElement(TabSetItem, {
        title: "Title 1"
      }, "Content 1"), /*#__PURE__*/React.createElement(TabSetItem, {
        title: "Title 2"
      }, "Content 2"), /*#__PURE__*/React.createElement(TabSetItem, {
        title: "Title 3"
      }, "Content 3")));
    });
    it('displays a left scroll button', function () {
      expect(wrapper.getByTestId('scroll-left')).toBeInTheDocument();
    });
    it('displays a right scroll button', function () {
      expect(wrapper.getByTestId('scroll-right')).toBeInTheDocument();
    });
  });
});