import React from 'react';
import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';

import { Templates } from '../index';
import mockdata from '../../mockdata';
import { rcsTemplates, senderDetailsRcs } from './mockData';

const { whatsappTemplates: TemplatesProp, getCreativesParamsOutput, zaloTemplates: ZaloTemplateProp } = mockdata;

jest.mock('../../CreativesContainer', () => ({
  __esModule: true,
  default: (props) => (
    <div className="creatives-container-mock" {...props}>
      CreativesContainer
    </div>
  ),
}));

describe('Test Templates container', () => {
  const getWeCrmAccounts = jest.fn();
  const setChannelAccount = jest.fn();
  const getAllTemplates = jest.fn();
  const getUserList = jest.fn();
  const getSenderDetails = jest.fn();
  const resetTemplate = jest.fn();
  const setArchivedMode = jest.fn();
  const clearTemplateSelection = jest.fn();
  const toggleTemplateSelection = jest.fn();
  let renderedComponent;

  beforeEach(() => {
    jest.clearAllMocks();
  });

  const getTemplateProps =(channel)=>{
    switch(channel){
      case 'whatsapp':
        return TemplatesProp;
      case 'zalo':
        return ZaloTemplateProp;
      case 'rcs':
        return rcsTemplates;
      default:
        return TemplatesProp;
    }
  }

  const RenderFunctionFor = (channel, isFullMode) => {
    renderedComponent = shallowWithIntl(
      <Templates
        route={{
          name: channel,
        }}
        Templates={getTemplateProps(channel)}
        actions={{
          getWeCrmAccounts,
          setChannelAccount,
          getAllTemplates,
          getUserList,
          getSenderDetails,
          resetTemplate,
          setArchivedMode,
          clearTemplateSelection,
          toggleTemplateSelection,
        }}
        location={{
          pathname: `/${channel}`,
          query: {},
          search: '',
        }}
        EmailCreate={{
          duplicateTemplateInProgress: false,
        }}
        isFullMode={isFullMode}
        intl={{
          formatMessage: () => {},
        }}
      />,
    );
  };

  it('Should render correct component for whatsapp channel', () => {
    RenderFunctionFor('whatsapp');
    expect(renderedComponent).toMatchSnapshot();
    expect(getSenderDetails).toHaveBeenCalledTimes(1);
    expect(getSenderDetails).toHaveBeenCalledWith({
      channel: 'WHATSAPP',
      orgUnitId: -1,
    });
    // resetTemplate should be called when entering account selection mode
    expect(resetTemplate).toHaveBeenCalled();
  });

  it('Should render temlates when whatsapp templates are passed', () => {
    RenderFunctionFor('whatsapp');
    renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render illustration when no templates are passed', () => {
    RenderFunctionFor('whatsapp');
    renderedComponent.setProps({
      TemplatesList: [],
      Templates: {},
    });
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render sms illustration when no templates are passed', () => {
    RenderFunctionFor('sms');
    renderedComponent.setProps({
      TemplatesList: [],
      Templates: {},
    });
    expect(renderedComponent).toMatchSnapshot();
    // SMS doesn't enter account selection mode, so resetTemplate shouldn't be called on mount
    expect(resetTemplate).not.toHaveBeenCalled();
  });

  it('Should render temlates when whatsapp templates are passed in full mode', () => {
    RenderFunctionFor('whatsapp',true);
    renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
    renderedComponent.setState({ selectedWhatsappStatus: 'approved' });
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Test getCreatives params in edit mode', () => {
    RenderFunctionFor('whatsapp');
    renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
    renderedComponent.setState({ routeParams: { pathname: '/edit' } });
    expect(renderedComponent.instance().getCreativesParams()).toEqual(
      getCreativesParamsOutput,
    );
  });
  it('Should render correct component for zalo channel', () => {
    RenderFunctionFor('zalo');
    expect(renderedComponent).toMatchSnapshot();
    // resetTemplate should be called when entering account selection mode
    expect(resetTemplate).toHaveBeenCalled();
  });
  it('Should render temlates when zalo templates are passed', () => {
    RenderFunctionFor('zalo');
    renderedComponent.setProps({ TemplatesList: ZaloTemplateProp.templates });
    expect(renderedComponent).toMatchSnapshot();
  });
  it('Should render temlates when Zalo templates are passed in full mode', () => {
    RenderFunctionFor('zalo',true);
    renderedComponent.setProps({ TemplatesList: ZaloTemplateProp.templates });
    expect(renderedComponent).toMatchSnapshot();
  });
  it('Should render illustration when no templates are passed', () => {
    RenderFunctionFor('zalo');
    renderedComponent.setProps({
      TemplatesList: [],
      Templates: {},
    });
    expect(renderedComponent).toMatchSnapshot();
  });

  const getFilterContainer = () => {
    const FilterContainer = () =>
      renderedComponent.find('.selected-whatsapp-filters').props().children;
    return shallowWithIntl(<FilterContainer />);
  };
  it('Test removing single filter', () => {
    RenderFunctionFor('whatsapp');
    renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
    renderedComponent.setState({ selectedWhatsappStatus: 'approved' });
    getFilterContainer().find('CapTag').props().onClose();
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Test removing all whatsapp filterss', () => {
    RenderFunctionFor('whatsapp');
    renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });

    renderedComponent.setState({ selectedWhatsappStatus: 'approved' });
    renderedComponent.setState({ selectedWhatsappCategory: 'ALERT_UPDATE' });
    expect(renderedComponent).toMatchSnapshot();

    //remove all filters
    getFilterContainer().find('CapLink').props().onClick();
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Test max templates not exceeded', () => {
    RenderFunctionFor('whatsapp',true);
    renderedComponent.setProps({
      TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 260 }],
    });
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Test max templates exceeded', () => {
    RenderFunctionFor('whatsapp',true);
    renderedComponent.setProps({
      TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 1510 }],
    });
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Test max templates warning', () => {
    RenderFunctionFor('whatsapp',true);
    renderedComponent.setProps({
      TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 248 }],
    });
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render correct component for RCS channel', () => {
    RenderFunctionFor('rcs');
    expect(renderedComponent).toMatchSnapshot();
    expect(getSenderDetails).toHaveBeenCalledTimes(1);
    expect(getSenderDetails).toHaveBeenCalledWith({
      channel: 'RCS',
      orgUnitId: -1,
    });
    // resetTemplate should be called when entering account selection mode
    expect(resetTemplate).toHaveBeenCalled();
  });

  it('Should render templates when RCS templates are passed', () => {
    RenderFunctionFor('rcs');
    renderedComponent.setProps({ TemplatesList: rcsTemplates.templates });
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render illustration when no RCS templates are passed', () => {
    RenderFunctionFor('rcs');
    renderedComponent.setProps({
      TemplatesList: [],
      Templates: {},
    });
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render templates when RCS templates are passed in full mode', () => {
    RenderFunctionFor('rcs',true);
    renderedComponent.setProps({ TemplatesList: rcsTemplates.templates });
    renderedComponent.setState({ selectedRcsStatus: 'approved' });
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Test getCreatives params in edit mode for RCS', () => {
    RenderFunctionFor('rcs');
    renderedComponent.setProps({ TemplatesList: rcsTemplates.templates });
    renderedComponent.setState({ routeParams: { pathname: '/edit' } });
    const getCreativesParamsOutputRcs = {
      _id: undefined,
      account: undefined,
      mode: 'edit',
      modeType: undefined,
      type: 'RCS',
    };
    expect(renderedComponent.instance().getCreativesParams()).toEqual(
      getCreativesParamsOutputRcs,
    );
  });
});
