import React from 'react';
import { injectIntl } from 'react-intl';
import '@testing-library/jest-dom';
import { Provider } from 'react-redux';
import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils';
import history from '../../../utils/history';
import { initialReducer } from '../../../initialReducer';
import { Zalo } from '..';
import {
  metaEntities,
  editData,
  location,
  getDefaultTags,
  injectedTags,
  accountData,
  templateData,
  templateConfigs,
} from './mockData';
import { render, screen, fireEvent } from '../../../utils/test-utils';

const mockActions = {
  getTemplateInfoById: jest.fn(),
  resetTemplateInfoData: jest.fn(),
};
const mockGlobalActions = {
  fetchSchemaForEntity: jest.fn(),
};

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(Zalo);
const renderComponent = (props) =>
  render(
    <Provider store={store}>
      <ComponentToRender {...props} />
    </Provider>,
  );

describe('Test activity zalo container', () => {
  it('test case for zalo template', async () => {
    renderComponent({
      actions: mockActions,
      globalActions: mockGlobalActions,
      editData,
      metaEntities,
      location,
      getDefaultTags,
      injectedTags,
      accountData,
      templateData,
      isFullMode: true,
    });
    const inputBox = await screen.findAllByPlaceholderText(
      'Add labels or text or combination of both',
    );
    fireEvent.change(inputBox[0], { target: { value: 'Hello, welcome' } });
    inputBox[0].focus();
    const previewButton = screen.getByTestId('preview-link-button');
    previewButton.click();
    expect(
      screen.getByText('This template has been enabled/approved'),
    ).toBeInTheDocument();
  });

  it('test case for text field curly braces error', async () => {
    renderComponent({
      actions: mockActions,
      globalActions: mockGlobalActions,
      editData,
      metaEntities,
      location,
      getDefaultTags,
      injectedTags,
      accountData,
      templateData,
      isFullMode: true,
    });
    const inputBox = await screen.findAllByPlaceholderText(
      'Add labels or text or combination of both',
    );
    fireEvent.change(inputBox[0], { target: { value: 'Hello, welcome {{' } });
    inputBox[0].focus();
    expect(
      screen.getByText('Invalid label, please close all curly braces'),
    ).toBeInTheDocument();
  });

  it('test case for unsupported tag', async () => {
    renderComponent({
      actions: mockActions,
      globalActions: mockGlobalActions,
      editData,
      metaEntities,
      location,
      getDefaultTags,
      injectedTags,
      accountData,
      templateData,
      isFullMode: true,
    });
    const inputBox = await screen.findAllByPlaceholderText(
      'Add labels or text or combination of both',
    );
    fireEvent.change(inputBox[0], {
      target: { value: 'Hello, welcome {{fsdaf}}' },
    });
    inputBox[0].focus();
    expect(inputBox[0].value).toBe('Hello, welcome {{fsdaf}}');
  });

  it('test case for set template data', async () => {
    templateData.templateConfigs = templateConfigs;
    renderComponent({
      actions: mockActions,
      globalActions: mockGlobalActions,
      editData,
      metaEntities,
      location,
      getDefaultTags,
      injectedTags,
      accountData,
      templateData,
      isFullMode: false,
    });
    const inputBox = await screen.findAllByPlaceholderText(
      'Add labels or text or combination of both',
    );
    fireEvent.change(inputBox[0], {
      target: {
        value:
          'Hello, welcome user. Habata itara modoranai to ittta Mezashita no wa aoi aoi ano sora',
      },
    });
    inputBox[0].focus();
    expect(
      screen.getByText(
        'Character count for this variable should be in between 0 to 30',
      ),
    ).toBeInTheDocument();
  });
});