import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { IntlProvider } from 'react-intl';
import CapTagListWithInput from '../index';

const capturedTagListProps = { current: null };

jest.mock('../../../v2Containers/TagList', () => {
  const React = require('react');
  const Mock = (props) => {
    capturedTagListProps.current = props;
    return <div data-testid="mock-tag-list">TagList</div>;
  };
  return Mock;
});

jest.mock('@capillarytech/cap-ui-library/CapRow', () => ({ children }) => <div>{children}</div>);
jest.mock('@capillarytech/cap-ui-library/CapColumn', () => ({ children }) => <div>{children}</div>);
jest.mock('@capillarytech/cap-ui-library/CapHeading', () => () => null);
jest.mock('@capillarytech/cap-ui-library/CapInput', () => () => <input data-testid="cap-input" />);

const waitMap = {
  b1: { eventName: 'Order Placed', blockName: 'Wait', tags: [] },
};

describe('CapTagListWithInput', () => {
  beforeEach(() => {
    capturedTagListProps.current = null;
  });

  it('forwards waitEventContextTags to TagList', () => {
    render(
      <IntlProvider locale="en" messages={{}}>
        <CapTagListWithInput
          inputId="test-url"
          inputOnChange={jest.fn()}
          waitEventContextTags={waitMap}
          onTagSelect={jest.fn()}
          onContextChange={jest.fn()}
        />
      </IntlProvider>
    );

    expect(screen.getByTestId('mock-tag-list')).toBeInTheDocument();
    expect(capturedTagListProps.current.waitEventContextTags).toEqual(waitMap);
  });

  it('uses default empty object for waitEventContextTags when omitted', () => {
    render(
      <IntlProvider locale="en" messages={{}}>
        <CapTagListWithInput
          inputId="test-url"
          inputOnChange={jest.fn()}
          onTagSelect={jest.fn()}
          onContextChange={jest.fn()}
        />
      </IntlProvider>
    );

    expect(capturedTagListProps.current.waitEventContextTags).toEqual({});
  });
});
