// Mock the CapIllustration component
jest.mock('@capillarytech/cap-ui-library', () => ({
  CapIllustration: ({ children, ...props }) => <div data-testid="cap-illustration" {...props}>{children}</div>
}));

// Mock all image imports
jest.mock('../../Assets/images/emailIllustration.svg', () => 'test-file-stub');
jest.mock('../../Assets/images/smsIllustration.svg', () => 'test-file-stub');
jest.mock('../../Assets/images/pushIllustration.svg', () => 'test-file-stub');
jest.mock('../../Assets/images/whatsappIllustration.png', () => 'test-file-stub');
jest.mock('../../Assets/images/whatsappOrZaloAccountIllustration.svg', () => 'test-file-stub');
jest.mock('../../Assets/images/rcsIllustration.png', () => 'test-file-stub');
jest.mock('@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg', () => 'test-file-stub');


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from '@cfaester/enzyme-adapter-react-18';
import ChannelTypeIllustration from '../ChannelTypeIllustration';
import { MOBILE_PUSH, SMS, EMAIL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO, INAPP } from '../../CreativesContainer/constants';

configure({ adapter: new Adapter() });

describe('ChannelTypeIllustration', () => {
  const mockCreateTemplate = jest.fn();
  const mockIntl = {
    formatMessage: jest.fn(() => 'some text')
  };

  beforeEach(() => {
    jest.clearAllMocks();
    mockIntl.formatMessage.mockClear();
  });

  const defaultProps = {
    isFullMode: false,
    intl: mockIntl,
    createTemplate: mockCreateTemplate,
    currentChannel: SMS,
    hostName: false
  };

  beforeEach(() => {
    jest.clearAllMocks();
    mockIntl.formatMessage.mockClear();
  });

  const renderComponent = (props = {}) => {
    return shallow(
      <ChannelTypeIllustration {...defaultProps} {...props} intl={mockIntl} />
    );
  };

  describe('Component Rendering', () => {
    it('should render CapIllustration component', () => {
      const component = renderComponent();
      expect(component.find('CapIllustration')).toHaveLength(1);
    });

    it('should pass correct buttonClassName based on currentChannel', () => {
      const component = renderComponent({ currentChannel: 'SMS' });
      const capIllustration = component.find('CapIllustration');
      expect(capIllustration.prop('buttonClassName')).toBe('create-new-sms');
    });

    it('should handle undefined currentChannel gracefully', () => {
      const component = renderComponent({ currentChannel: undefined });
      const capIllustration = component.find('CapIllustration');
      expect(capIllustration.prop('buttonClassName')).toBe('unknown-illustration-button');
    });
  });

  describe('SMS Channel', () => {
    it('should return correct illustration info for SMS channel', () => {
      const component = renderComponent({ currentChannel: SMS });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
      expect(capIllustration.prop('buttonLabel')).toBeDefined();
      expect(capIllustration.prop('title')).toBeDefined();
    });

    it('should include template text in full mode for SMS', () => {
      const component = renderComponent({
        currentChannel: SMS,
        isFullMode: true
      });
      const capIllustration = component.find('CapIllustration');
      expect(capIllustration.prop('buttonLabel')).toBeDefined();
      expect(capIllustration.prop('title')).toBeDefined();
    });
  });

  describe('EMAIL Channel', () => {
    it('should return correct illustration info for EMAIL channel', () => {
      const component = renderComponent({ currentChannel: EMAIL });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
      expect(capIllustration.prop('buttonLabel')).toBeDefined();
      expect(capIllustration.prop('title')).toBeDefined();
    });
  });

  describe('MOBILE_PUSH Channel', () => {
    it('should return correct illustration info for MOBILE_PUSH channel', () => {
      const component = renderComponent({ currentChannel: MOBILE_PUSH });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
      expect(capIllustration.prop('buttonLabel')).toBeDefined();
      expect(capIllustration.prop('title')).toBeDefined();
    });
  });

  describe('WHATSAPP Channel', () => {
    it('should return correct illustration info for WHATSAPP channel when hostName is available', () => {
      const component = renderComponent({
        currentChannel: WHATSAPP,
        hostName: true
      });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
      expect(capIllustration.prop('buttonLabel')).toBeDefined();
      expect(capIllustration.prop('title')).toBeDefined();
      expect(capIllustration.prop('description')).toBeDefined();
      expect(capIllustration.prop('descriptionPosition')).toBe('bottom');
      expect(capIllustration.prop('descriptionClassName')).toBe('illustration-desc');
    });

    it('should return account not configured info for WHATSAPP when hostName is not available', () => {
      const component = renderComponent({
        currentChannel: WHATSAPP,
        hostName: false
      });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
      expect(capIllustration.prop('title')).toBeDefined();
      expect(capIllustration.prop('description')).toBeDefined();
      expect(capIllustration.prop('descriptionPosition')).toBe('bottom');
      expect(capIllustration.prop('descriptionClassName')).toBe('illustration-desc zalo-illustration');
      expect(capIllustration.prop('buttonClassName')).toBe('zalo-illustration-button');
      expect(capIllustration.prop('onClick')).toBeUndefined();
      expect(capIllustration.prop('buttonLabel')).toBeUndefined();
    });
  });

  describe('RCS Channel', () => {
    it('should return correct illustration info for RCS channel', () => {
      const component = renderComponent({ currentChannel: RCS });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
      expect(capIllustration.prop('buttonLabel')).toBeDefined();
      expect(capIllustration.prop('title')).toBeDefined();
      expect(capIllustration.prop('description')).toBeDefined();
      expect(capIllustration.prop('descriptionPosition')).toBe('bottom');
      expect(capIllustration.prop('descriptionClassName')).toBe('illustration-desc rcs-illustration');
    });
  });

  describe('ZALO Channel', () => {
    it('should return correct illustration info for ZALO channel when hostName is available', () => {
      const component = renderComponent({
        currentChannel: ZALO,
        hostName: true
      });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
      expect(capIllustration.prop('title')).toBeDefined();
      expect(capIllustration.prop('description')).toBeDefined();
      expect(capIllustration.prop('descriptionPosition')).toBe('bottom');
      expect(capIllustration.prop('descriptionClassName')).toBe('illustration-desc zalo-illustration');
      expect(capIllustration.prop('buttonClassName')).toBe('zalo-illustration-button');
      expect(capIllustration.prop('onClick')).toBeUndefined();
      expect(capIllustration.prop('buttonLabel')).toBeUndefined();
    });

    it('should return account not configured info for ZALO when hostName is not available', () => {
      const component = renderComponent({
        currentChannel: ZALO,
        hostName: false
      });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
      expect(capIllustration.prop('title')).toBeDefined();
      expect(capIllustration.prop('description')).toBeDefined();
      expect(capIllustration.prop('descriptionPosition')).toBe('bottom');
      expect(capIllustration.prop('descriptionClassName')).toBe('illustration-desc zalo-illustration');
      expect(capIllustration.prop('buttonClassName')).toBe('zalo-illustration-button');
      expect(capIllustration.prop('onClick')).toBeUndefined();
      expect(capIllustration.prop('buttonLabel')).toBeUndefined();
    });
  });

  describe('INAPP Channel', () => {
    it('should return correct illustration info for INAPP channel', () => {
      const component = renderComponent({ currentChannel: INAPP });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
      expect(capIllustration.prop('title')).toBeDefined();
      expect(capIllustration.prop('description')).toBeDefined();
      expect(capIllustration.prop('descriptionPosition')).toBe('bottom');
      expect(capIllustration.prop('descriptionClassName')).toBe('illustration-desc inapp-illustration');
      expect(capIllustration.prop('buttonClassName')).toBe('inapp-illustration-button');
      expect(capIllustration.prop('onClick')).toBeUndefined();
      expect(capIllustration.prop('buttonLabel')).toBeUndefined();
    });
  });

  describe('VIBER Channel', () => {
    it('should return correct illustration info for VIBER channel', () => {
      const component = renderComponent({ currentChannel: VIBER });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
      expect(capIllustration.prop('buttonLabel')).toBeDefined();
      expect(capIllustration.prop('title')).toBeDefined();
    });
  });

  describe('LINE Channel', () => {
    it('should return correct illustration info for LINE channel', () => {
      const component = renderComponent({ currentChannel: LINE });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
      expect(capIllustration.prop('buttonLabel')).toBeDefined();
      expect(capIllustration.prop('title')).toBeDefined();
    });
  });

  describe('FACEBOOK Channel', () => {
    it('should return correct illustration info for FACEBOOK channel', () => {
      const component = renderComponent({ currentChannel: FACEBOOK });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
      expect(capIllustration.prop('onClick')).toBe(mockCreateTemplate);
      expect(capIllustration.prop('buttonLabel')).toBeDefined();
      expect(capIllustration.prop('title')).toBeDefined();
    });
  });

  describe('Edge Cases', () => {
    it('should return default illustration for unknown channel type', () => {
      const component = renderComponent({ currentChannel: 'UNKNOWN_CHANNEL' });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('illustrationImage')).toBe('test-file-stub');
      expect(capIllustration.prop('onClick')).toBeUndefined();
      expect(capIllustration.prop('buttonLabel')).toBeDefined();;
      expect(capIllustration.prop('title')).toBe('');
    });

    it('should handle null currentChannel', () => {
      const component = renderComponent({ currentChannel: null });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('buttonClassName')).toBe('unknown-illustration-button');
    });

    it('should handle empty string currentChannel', () => {
      const component = renderComponent({ currentChannel: '' });
      const capIllustration = component.find('CapIllustration');

      expect(capIllustration.prop('buttonClassName')).toBe('unknown-illustration-button');
    });
  });

  describe('isFullMode Behavior', () => {
    it('should render FormattedMessage components when isFullMode is true', () => {
      const component = renderComponent({
        currentChannel: SMS,
        isFullMode: true
      });
      const capIllustration = component.find('CapIllustration');
      expect(capIllustration.prop('buttonLabel')).toBeDefined();
      expect(capIllustration.prop('title')).toBeDefined();
    });

    it('should render FormattedMessage components when isFullMode is false', () => {
      const component = renderComponent({
        currentChannel: SMS,
        isFullMode: false
      });
      const capIllustration = component.find('CapIllustration');
      expect(capIllustration.prop('buttonLabel')).toBeDefined();
      expect(capIllustration.prop('title')).toBeDefined();
    });
  });

  describe('PropTypes Validation', () => {
    it('should handle missing optional props gracefully', () => {
      const minimalProps = {
        intl: mockIntl,
        createTemplate: mockCreateTemplate
      };

      expect(() => {
        renderComponent(minimalProps);
      }).not.toThrow();
    });

    it('should handle all required props', () => {
      expect(() => {
        renderComponent(defaultProps);
      }).not.toThrow();
    });
  });

  describe('isArchivedMode', () => {
    it('should render CapIllustration when isArchivedMode is true', () => {
      const wrapper = renderComponent({ isArchivedMode: true });
      expect(wrapper.find('CapIllustration').exists()).toBe(true);
    });

    it('should render CapIllustration when isArchivedMode is false', () => {
      const wrapper = renderComponent({ isArchivedMode: false, currentChannel: SMS });
      expect(wrapper.find('CapIllustration').exists()).toBe(true);
    });
  });
});
