import React from 'react';
import { injectIntl } from 'react-intl';
import history from '../../../utils/history';
import '@testing-library/jest-dom';
import { Provider } from 'react-redux';
import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils';
import { initialReducer } from '../../../initialReducer';
import CapDeviceContent from '../index';
import { render, screen, fireEvent, renderWithRouter } from '../../../utils/test-utils';
import { deviceContentProps } from '../../../v2Containers/InApp/tests/mockData';

jest.mock('../../../v2Containers/TagList/index.js', () => ({
  __esModule: true,
  default: (props) => (
    <div className="tag-mock" {...props}>
      TagList
    </div>
  ),
}));

let store;
beforeAll(() => {
  store = configureStore({}, initialReducer, history);
});

const ComponentToRender = injectIntl(CapDeviceContent);
const renderComponent = (props) =>
  render(
     <Provider store={store}>
      <ComponentToRender {...props} />
    </Provider>,
  );

describe('Test CapDeviceContent', () => {
  it('test case for CapDeviceContent component Android pane', async () => {
    renderComponent({...deviceContentProps, templateDescErrorHandler: jest.fn()});
    const msgBox = screen.getAllByPlaceholderText(/Please input in-app notification message content/i);
    fireEvent.change(msgBox[0], 'val');
    const copyLink = screen.getByRole('link', {
      name: /copy title and content from ios/i,
    });
    fireEvent.click(copyLink);
    expect(copyLink).toBeInTheDocument();
  });
  it("test case for CapDeviceContent component Ios pane", () => {
    renderComponent({
      ...deviceContentProps,
      panes: "iOS",
      buttonType: "CTA",
      setTemplateMediaType: jest.fn(),
      setTemplateTitleError: jest.fn(),
      setButtonType: jest.fn(),
      setCtaData: jest.fn(),
      setTemplateMessage: jest.fn(),
      setTemplateMessageError: jest.fn(),
      setTitle: jest.fn(),
      templateDescErrorHandler: jest.fn(),
      templateMediType: "IMAGE",
      addActionLink: true,
      ctaData: [
        {
          index: 0,
          ctaType: "WEBSITE",
          text: "test",
          urlType: "DEEP_LINK",
          url: "link",
          isSaved: true,
        },
      ],
      deepLink: [
        {
          label: "Test_1",
          value: "link",
        },
      ],
    });
    const msgBox = screen.getAllByPlaceholderText(
      /Please input in-app notification message content/i
    );
    msgBox[0].focus();
    fireEvent.change(msgBox[0], { target: { value: "val" } });
    fireEvent.change(msgBox[0], { target: { value: "" } });
    const titleBox = screen.getAllByPlaceholderText(
      /Please input message title name/i
    );
    titleBox[0].focus();
    fireEvent.change(titleBox[0], { target: { value: "val" } });
    const img = screen.getByText(/image/i);
    fireEvent.click(img);
    const none = screen.getByText(/None/i);
    fireEvent.click(none);
    const editIcon = screen.getByText(/Test_1/i).nextSibling.firstChild;
    fireEvent.click(editIcon);
    expect(screen.getByText(/Test_1/i)).toBeInTheDocument();
  });
});
