import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import { AppProvider } from '@edx/frontend-platform/react';
import { initializeMockApp } from '@edx/frontend-platform';

import initializeStore from '../../store';
import HeaderTitle from './HeaderTitle';
import messages from './messages';

const unitTitle = 'Getting Started';
const isTitleEditFormOpen = false;
const handleTitleEdit = jest.fn();
const handleTitleEditSubmit = jest.fn();
let store;

const renderComponent = (props) => render(
  <AppProvider store={store}>
    <IntlProvider locale="en">
      <HeaderTitle
        unitTitle={unitTitle}
        isTitleEditFormOpen={isTitleEditFormOpen}
        handleTitleEdit={handleTitleEdit}
        handleTitleEditSubmit={handleTitleEditSubmit}
        {...props}
      />
    </IntlProvider>
  </AppProvider>,
);

describe('<HeaderTitle />', () => {
  beforeEach(async () => {
    initializeMockApp({
      authenticatedUser: {
        userId: 3,
        username: 'abc123',
        administrator: true,
        roles: [],
      },
    });

    store = initializeStore();
  });

  it('render HeaderTitle component correctly', () => {
    const { getByText, getByRole } = renderComponent();

    expect(getByText(unitTitle)).toBeInTheDocument();
    expect(getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeInTheDocument();
    expect(getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeInTheDocument();
  });

  it('render HeaderTitle with open edit form', () => {
    const { getByRole } = renderComponent({
      isTitleEditFormOpen: true,
    });

    expect(getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage })).toBeInTheDocument();
    expect(getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage })).toHaveValue(unitTitle);
    expect(getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeInTheDocument();
    expect(getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeInTheDocument();
  });

  it('calls toggle edit title form by clicking on Edit button', () => {
    const { getByRole } = renderComponent();

    const editTitleButton = getByRole('button', { name: messages.altButtonEdit.defaultMessage });
    userEvent.click(editTitleButton);
    expect(handleTitleEdit).toHaveBeenCalledTimes(1);
  });

  it('calls saving title by clicking outside or press Enter key', async () => {
    const { getByRole } = renderComponent({
      isTitleEditFormOpen: true,
    });

    const titleField = getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage });
    userEvent.type(titleField, ' 1');
    expect(titleField).toHaveValue(`${unitTitle} 1`);
    userEvent.click(document.body);
    expect(handleTitleEditSubmit).toHaveBeenCalledTimes(1);

    userEvent.click(titleField);
    userEvent.type(titleField, ' 2[Enter]');
    expect(titleField).toHaveValue(`${unitTitle} 1 2`);
    expect(handleTitleEditSubmit).toHaveBeenCalledTimes(2);
  });
});
