import React from 'react';
import { injectIntl } from 'react-intl';
import '@testing-library/jest-dom';
import cloneDeep from 'lodash/cloneDeep';
import { Provider } from 'react-redux';
import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils';
import history from '../../../utils/history';
import { initialReducer } from '../../../initialReducer';
import {
    render,
    screen,
} from '../../../utils/test-utils';
import { TemplatesV2 } from '../index';
import { Templates, authData, currentOrgDetails, } from './mockData';

const ComponentToRender = injectIntl(TemplatesV2);
const renderComponent = (props) => {
  const store = configureStore({}, initialReducer, history);
  return render(
    <Provider store={store}>
      <ComponentToRender {...props} />
    </Provider>,
  );
};

// Mock the UserAuthWrapper module
jest.mock('../../../utils/authWrapper', () => ({
  UserIsAuthenticated: jest.fn((config) => config),
}));

describe("Test TemplatesV2", () => {
  const templateActions = {
    templateActions: jest.fn(),
    deleteTemplate: jest.fn(),
    getAccountsSettings: jest.fn(),
    getAllTemplates: jest.fn(),
    getCdnTransformationConfig: jest.fn(),
    getDefaultBeeTemplates: jest.fn(),
    getSenderDetails: jest.fn(),
    getTemplateDetails: jest.fn(),
    getUserList: jest.fn(),
    getWeCrmAccounts: jest.fn(),
    handleHtmlUpload: jest.fn(),
    handleZipUpload: jest.fn(),
    resetAccount: jest.fn(),
    resetTemplate: jest.fn(),
    resetTemplateData: jest.fn(),
    resetTemplateStoreData: jest.fn(),
    resetUploadData: jest.fn(),
    setBEETemplate: jest.fn(),
    setChannelAccount: jest.fn(),
    setEdmTemplate: jest.fn(),
    setFacebookAccount: jest.fn(),
    setViberAccount: jest.fn(),
    setWeChatAccount: jest.fn(),
  };
  const props = {
    cap: {
     user:{ accessiblePermissions: ['CREATIVES_UI_VIEW']}
    },
    actions: { defaultAction: jest.fn(), getTemplates: jest.fn() },
    Templates,
    TemplatesList: Templates?.templates,
    authData,
    templateActions,
    isFullMode: true,
    channelsToHide: [],
    channelsToDisable: [],
    onChannelChange: jest.fn(),
    enableNewChannels: [],
    currentOrgDetails,
    location: {
      pathname: "v2",
      basename: "/creatives/ui/",
      query: {},
    },
  };
  const { getByText, queryByText } = screen;

  it("Should show only Email, Line channels and Gallery", () => {
    renderComponent(props);
    expect(getByText('Email')).toBeInTheDocument();
    expect(getByText('Line')).toBeInTheDocument();
    expect(getByText('Gallery')).toBeInTheDocument();
    expect(queryByText('RCS')).not.toBeInTheDocument();
    expect(queryByText('WhatsApp')).not.toBeInTheDocument();
    expect(queryByText('Zalo')).not.toBeInTheDocument();
  });

  it("Should show all other channels", () => {
    const updatedProps = cloneDeep(props);
    updatedProps.currentOrgDetails.accessibleFeatures.pop();
    renderComponent(updatedProps);
    expect(getByText('SMS')).toBeInTheDocument();
    expect(getByText('RCS')).toBeInTheDocument();
    expect(getByText('Email')).toBeInTheDocument();
    expect(getByText('Push notification')).toBeInTheDocument();
    expect(getByText('Line')).toBeInTheDocument();
    //commented for removing wechat in tab
    // expect(getByText('Wechat')).toBeInTheDocument();
    expect(getByText('Viber')).toBeInTheDocument();
    expect(getByText('Facebook')).toBeInTheDocument();
    expect(getByText('WhatsApp')).toBeInTheDocument();
    expect(getByText('Zalo')).toBeInTheDocument();
    expect(getByText('Gallery')).toBeInTheDocument();
  });
});
