import React from 'react';
import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
import MediaSection from './MediaSection';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
import {
  WEBPUSH_MEDIA_TYPES,
  IMAGE_UPLOAD_METHODS,
} from '../../constants';

// Mock CapImageUpload
jest.mock('../../../../v2Components/CapImageUpload', () => {
  const React = require('react');
  return function MockCapImageUpload(props) {
    return (
      <div data-testid="cap-image-upload" className="cap-image-upload-mock">
        <div>CapImageUpload</div>
        <div>imageSrc: {props.imageSrc}</div>
        <div>channel: {props.channel}</div>
      </div>
    );
  };
});

// Mock CapImageUrlUpload
jest.mock('../../../../v2Components/CapImageUrlUpload', () => {
  const React = require('react');
  return function MockCapImageUrlUpload(props) {
    return (
      <div data-testid="cap-image-url-upload" className="cap-image-url-upload-mock">
        <div>CapImageUrlUpload</div>
        <div>imageUrl: {props.imageUrl}</div>
        <div>imageSrc: {props.imageSrc}</div>
        <div>disabled: {props.disabled ? 'true' : 'false'}</div>
      </div>
    );
  };
});

describe('MediaSection', () => {
  const mockFormatMessage = jest.fn((message) => message?.defaultMessage || message?.id || message);
  const mockOnMediaTypeChange = jest.fn();

  const mockMessages = {
    mediaType: {
      id: 'app.webpush.mediaType',
      defaultMessage: 'Media Type',
    },
    sizeLimit: {
      id: 'app.webpush.sizeLimit',
      defaultMessage: 'Size limit',
    },
    formatTypes: {
      id: 'app.webpush.formatTypes',
      defaultMessage: 'Format types',
    },
  };

  const mockImageUpload = {
    uploadMethod: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
    imageSrc: '',
    imageUrl: '',
    isValidating: false,
    isUploading: false,
    uploadAsset: jest.fn(),
    setUpdateImageSrc: jest.fn(),
    updateOnReUpload: jest.fn(),
    handleUrlChange: jest.fn(),
    handleValidationStateChange: jest.fn(),
    handleUploadStateChange: jest.fn(),
  };

  const defaultProps = {
    mediaType: WEBPUSH_MEDIA_TYPES.NONE,
    onMediaTypeChange: mockOnMediaTypeChange,
    imageUpload: mockImageUpload,
    isLocked: false,
    isAnyUploadActive: false,
    formatMessage: mockFormatMessage,
    messages: mockMessages,
    webPush: {},
    isFullMode: true,
  };

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

  describe('Rendering', () => {
    it('should render correctly with default props', () => {
      const wrapper = shallowWithIntl(<MediaSection {...defaultProps} />);
      expect(wrapper).toMatchSnapshot();
    });

    it('should render main container with correct class', () => {
      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
      const container = wrapper.find('.creatives-webpush-media');
      expect(container.exists()).toBe(true);
    });

    it('should render heading', () => {
      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
      const heading = wrapper.find(CapHeading).find('.webpush-media-type');
      expect(heading.exists()).toBe(true);
    });

    it('should render CapSelect.CapCustomSelect with correct props', () => {
      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
      const select = wrapper.find(CapSelect.CapCustomSelect);
      expect(select.exists()).toBe(true);
      expect(select.prop('width')).toBe('100%');
      expect(select.prop('className')).toBe('margin-t-4');
      expect(select.prop('value')).toBe(WEBPUSH_MEDIA_TYPES.NONE);
      expect(select.prop('disabled')).toBe(false);
    });

    it('should render Divider', () => {
      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
      const divider = wrapper.find(CapDivider);
      expect(divider.exists()).toBe(true);
    });
  });

  describe('Media Type Selection', () => {
    it('should call onMediaTypeChange when select changes', () => {
      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
      const select = wrapper.find(CapSelect.CapCustomSelect);
      select.prop('onChange')(WEBPUSH_MEDIA_TYPES.IMAGE);
      expect(mockOnMediaTypeChange).toHaveBeenCalledWith(WEBPUSH_MEDIA_TYPES.IMAGE);
    });

    it('should disable select when isAnyUploadActive is true', () => {
      const wrapper = mountWithIntl(
        <MediaSection {...defaultProps} isAnyUploadActive={true} />
      );
      const select = wrapper.find(CapSelect.CapCustomSelect);
      expect(select.prop('disabled')).toBe(true);
    });
  });

  describe('Image Upload - UPLOAD_IMAGE Method', () => {
    it('should render CapImageUpload when mediaType is IMAGE and uploadMethod is UPLOAD_IMAGE', () => {
      const wrapper = mountWithIntl(
        <MediaSection
          {...defaultProps}
          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
          imageUpload={{
            ...mockImageUpload,
            uploadMethod: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
            imageSrc: 'path/to/image.jpg',
          }}
        />
      );
      const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
      expect(imageUpload.exists()).toBe(true);
    });

    it('should not render CapImageUpload when mediaType is NONE', () => {
      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
      const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
      expect(imageUpload.exists()).toBe(false);
    });

    it('should apply locked styles when isLocked is true', () => {
      const wrapper = mountWithIntl(
        <MediaSection
          {...defaultProps}
          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
          isLocked={true}
        />
      );
      const uploadSection = wrapper.find('.webpush-image-upload-section').first();
      expect(uploadSection.exists()).toBe(true);
      expect(uploadSection.prop('aria-disabled')).toBe(true);
    });

    it('should not apply locked styles when isLocked is false', () => {
      const wrapper = mountWithIntl(
        <MediaSection
          {...defaultProps}
          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
          isLocked={false}
        />
      );
      const uploadSection = wrapper.find('.webpush-image-upload-section');
      expect(uploadSection.exists()).toBe(true);
    });
  });

  describe('Image Upload - ADD_IMAGE_URL Method', () => {
    it('should render CapImageUrlUpload when mediaType is IMAGE and uploadMethod is ADD_IMAGE_URL', () => {
      const wrapper = mountWithIntl(
        <MediaSection
          {...defaultProps}
          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
          imageUpload={{
            ...mockImageUpload,
            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
            imageUrl: 'https://example.com/image.jpg',
          }}
        />
      );
      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
      expect(imageUrlUpload.exists()).toBe(true);
    });

    it('should not render CapImageUrlUpload when mediaType is NONE', () => {
      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
      expect(imageUrlUpload.exists()).toBe(false);
    });

    it('should apply locked styles when isLocked is true', () => {
      const wrapper = mountWithIntl(
        <MediaSection
          {...defaultProps}
          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
          imageUpload={{
            ...mockImageUpload,
            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
          }}
          isLocked={true}
        />
      );
      const urlSection = wrapper.find('.webpush-image-url-section').first();
      expect(urlSection.exists()).toBe(true);
      expect(urlSection.prop('aria-disabled')).toBe(true);
    });

    it('should pass disabled prop to CapImageUrlUpload when isLocked is true', () => {
      const wrapper = mountWithIntl(
        <MediaSection
          {...defaultProps}
          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
          imageUpload={{
            ...mockImageUpload,
            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
          }}
          isLocked={true}
        />
      );
      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
      expect(imageUrlUpload.exists()).toBe(true);
    });
  });

  describe('Image Upload State', () => {
    it('should set isImageFieldActive when isValidating is true', () => {
      const wrapper = mountWithIntl(
        <MediaSection
          {...defaultProps}
          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
          imageUpload={{
            ...mockImageUpload,
            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
            isValidating: true,
          }}
        />
      );
      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
      expect(imageUrlUpload.exists()).toBe(true);
    });

    it('should set isImageFieldActive when isUploading is true', () => {
      const wrapper = mountWithIntl(
        <MediaSection
          {...defaultProps}
          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
          imageUpload={{
            ...mockImageUpload,
            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
            isUploading: true,
          }}
        />
      );
      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
      expect(imageUrlUpload.exists()).toBe(true);
    });
  });

  describe('Default Props', () => {
    it('should use default isLocked when not provided', () => {
      const wrapper = mountWithIntl(
        <MediaSection
          mediaType={WEBPUSH_MEDIA_TYPES.NONE}
          onMediaTypeChange={mockOnMediaTypeChange}
          imageUpload={mockImageUpload}
          formatMessage={mockFormatMessage}
          messages={mockMessages}
        />
      );
      const select = wrapper.find(CapSelect.CapCustomSelect);
      expect(select.prop('disabled')).toBe(false);
    });

    it('should use default isAnyUploadActive when not provided', () => {
      const wrapper = mountWithIntl(
        <MediaSection
          mediaType={WEBPUSH_MEDIA_TYPES.NONE}
          onMediaTypeChange={mockOnMediaTypeChange}
          imageUpload={mockImageUpload}
          formatMessage={mockFormatMessage}
          messages={mockMessages}
        />
      );
      const select = wrapper.find(CapSelect.CapCustomSelect);
      expect(select.prop('disabled')).toBe(false);
    });

    it('should use default webPush when not provided', () => {
      const wrapper = mountWithIntl(
        <MediaSection
          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
          onMediaTypeChange={mockOnMediaTypeChange}
          imageUpload={mockImageUpload}
          formatMessage={mockFormatMessage}
          messages={mockMessages}
        />
      );
      const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
      expect(imageUpload.exists()).toBe(true);
    });

    it('should use default isFullMode when not provided', () => {
      const wrapper = mountWithIntl(
        <MediaSection
          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
          onMediaTypeChange={mockOnMediaTypeChange}
          imageUpload={mockImageUpload}
          formatMessage={mockFormatMessage}
          messages={mockMessages}
        />
      );
      const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
      expect(imageUpload.exists()).toBe(true);
    });
  });
});

