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

import { SlideBoxHeader } from '../SlideBoxHeader';
import mockdata from '../../mockdata';

const { whatsappEditTemplateData, rcsEditTemplateData, whatsappPreviewTemplateData, rcsPreviewTemplateData,zaloEditTemplateData } = mockdata;

jest.mock("../../../v2Components/FormBuilder", () => ({
  __esModule: true,
  default: (props) => <div className="FormBuilder-mock" {...props}>FormBuilder</div>,
}));

describe('Test SlideBoxHeader container', () => {
  const onCreateComplete = jest.fn();
  let renderedComponent;

  const renderFunction = (channel, mode, templateData, isFullMode) => {
    renderedComponent = shallowWithIntl(
      <SlideBoxHeader
        slidBoxContent={mode}
        channel={channel}
        templateData={templateData}
        onCreateComplete={onCreateComplete}
        isFullMode={isFullMode}
        moduleType="journey"
      />
    );
  };

  it('Should render correct component for whatsapp channel create mode', () => {
    renderFunction("WHATSAPP", "createTemplate", { mode: "create" });
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render correct component for whatsapp channel edit mode', () => {
    renderFunction("WHATSAPP", "editTemplate", whatsappEditTemplateData, true);
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render correct component for whatsapp channel preview mode', () => {
    renderFunction("WHATSAPP", "preview", whatsappPreviewTemplateData);
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render correct component for whatsapp channel templates mode', () => {
    renderFunction("WHATSAPP", "templates");
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render correct component for rcs channel create mode', () => {
    renderFunction("RCS", "createTemplate", { mode: "create" });
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render correct component for rcs channel edit mode', () => {
    renderFunction("RCS", "editTemplate", rcsEditTemplateData, true);
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render correct component for rcs channel preview mode', () => {
    renderFunction("RCS", "preview", rcsPreviewTemplateData);
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render correct component for rcs channel templates mode', () => {
    renderFunction("RCS", "templates");
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render correct component for zalo channel edit mode', () => {
    renderFunction("ZALO", "editTemplate", zaloEditTemplateData, true);
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render correct component for inapp channel edit mode (non-fullmode)', () => {
    renderedComponent = shallowWithIntl(
      <SlideBoxHeader
        slidBoxContent="editTemplate"
        channel="INAPP"
        templateData={{ name: 'InApp Template' }}
        onCreateComplete={onCreateComplete}
        isFullMode={false}
        moduleType="journey"
      />
    );
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render correct component for inapp channel create mode', () => {
    renderedComponent = shallowWithIntl(
      <SlideBoxHeader
        slidBoxContent="createTemplate"
        channel="INAPP"
        templateData={{}}
        onCreateComplete={onCreateComplete}
        isFullMode={false}
        moduleType="journey"
        templateStep="modeSelection"
      />
    );
    expect(renderedComponent).toMatchSnapshot();
  });

  it('Should render wechat map template create steps (mapTemplateCreate path)', () => {
    renderedComponent = shallowWithIntl(
      <SlideBoxHeader
        slidBoxContent="createTemplate"
        channel="WECHAT"
        templateData={{}}
        onCreateComplete={onCreateComplete}
        isFullMode={false}
        moduleType="journey"
        weChatTemplateType="mapTemplate"
        templateStep="createTemplateContent"
        onWeChatMaptemplateStepChange={jest.fn()}
        weChatMaptemplateStep={0}
      />
    );
    expect(renderedComponent).toMatchSnapshot();
  });
});
