import React from 'react';
import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
import NotificationTitleSection from './NotificationTitleSection';
import CapInput from '@capillarytech/cap-ui-library/CapInput';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
import CapError from '@capillarytech/cap-ui-library/CapError';
import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
import { NOTIFICATION_TITLE_MAX_LENGTH, SHOW_CHARACTER_COUNT } from '../../constants';

describe('NotificationTitleSection', () => {
  const mockFormatMessage = jest.fn((message, values) => {
    if (values) {
      return `${values.currentLength}/${values.maxLength}`;
    }
    return message?.defaultMessage || message?.id || message;
  });
  const mockOnChange = jest.fn();

  const mockMessages = {
    notificationTitle: {
      id: 'app.webpush.notificationTitle',
      defaultMessage: 'Notification Title',
    },
    notificationTitlePlaceholder: {
      id: 'app.webpush.notificationTitlePlaceholder',
      defaultMessage: 'Enter notification title',
    },
    characterCount: {
      id: 'app.webpush.characterCount',
      defaultMessage: '{currentLength}/{maxLength}',
    },
  };

  const defaultProps = {
    value: 'Test Title',
    error: '',
    onChange: mockOnChange,
    formatMessage: mockFormatMessage,
    messages: mockMessages,
    tagList: null,
    titleCountRef: null,
  };

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

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

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

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

    it('should render CapInput', () => {
      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
      const input = wrapper.find(CapInput);
      expect(input.exists()).toBe(true);
    });

    it('should render placeholder correctly', () => {
      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
      const input = wrapper.find(CapInput);
      expect(input.exists()).toBe(true);
      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.notificationTitlePlaceholder);
    });
  });

  describe('Tag List', () => {
    it('should render tagList when provided', () => {
      const tagList = <div className="test-tag-list">Tag List</div>;
      const wrapper = mountWithIntl(
        <NotificationTitleSection {...defaultProps} tagList={tagList} />
      );
      const tagListContainer = wrapper.find('.webpush-title-taglist');
      expect(tagListContainer.exists()).toBe(true);
    });

    it('should render empty tagList container when not provided', () => {
      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
      const tagListContainer = wrapper.find('.webpush-title-taglist');
      expect(tagListContainer.exists()).toBe(true);
      // Check that no tagList content is rendered (CapRow itself may have internal structure)
      expect(tagListContainer.find('.test-tag-list').exists()).toBe(false);
    });
  });

  describe('Error Handling', () => {
    it('should not render error when error is empty', () => {
      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} error="" />);
      const error = wrapper.find(CapError);
      expect(error.exists()).toBe(false);
    });

    it('should render error when error is provided', () => {
      const errorMessage = 'Title is required';
      const wrapper = mountWithIntl(
        <NotificationTitleSection {...defaultProps} error={errorMessage} />
      );
      const error = wrapper.find(CapError).find('.webpush-template-title-error');
      expect(error.exists()).toBe(true);
    });
  });

  describe('Character Count', () => {
    it('should render character count when SHOW_CHARACTER_COUNT is true', () => {
      const titleCountRef = React.createRef();
      const wrapper = mountWithIntl(
        <NotificationTitleSection {...defaultProps} titleCountRef={titleCountRef} />
      );
      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
      expect(characterCount.exists()).toBe(true);
    });

    it('should display correct character count', () => {
      const titleCountRef = React.createRef();
      const wrapper = mountWithIntl(
        <NotificationTitleSection
          {...defaultProps}
          value="Test"
          titleCountRef={titleCountRef}
        />
      );
      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
      expect(characterCount.exists()).toBe(true);
    });
  });

  describe('User Interactions', () => {
    it('should call onChange when input value changes', () => {
      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
      const input = wrapper.find(CapInput);
      expect(input.exists()).toBe(true);
      // CapInput onChange is tested through integration
    });
  });

  describe('Default Props', () => {
    it('should use default error when not provided', () => {
      const wrapper = mountWithIntl(
        <NotificationTitleSection
          value="Test"
          onChange={mockOnChange}
          formatMessage={mockFormatMessage}
          messages={mockMessages}
        />
      );
      const error = wrapper.find(CapError);
      expect(error.exists()).toBe(false);
    });

    it('should use default tagList when not provided', () => {
      const wrapper = mountWithIntl(
        <NotificationTitleSection
          value="Test"
          onChange={mockOnChange}
          formatMessage={mockFormatMessage}
          messages={mockMessages}
        />
      );
      const tagListContainer = wrapper.find('.webpush-title-taglist');
      expect(tagListContainer.exists()).toBe(true);
    });

    it('should use default titleCountRef when not provided', () => {
      const wrapper = mountWithIntl(
        <NotificationTitleSection
          value="Test"
          onChange={mockOnChange}
          formatMessage={mockFormatMessage}
          messages={mockMessages}
        />
      );
      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
      expect(characterCount.exists()).toBe(true);
    });
  });

  describe('Edge Cases', () => {
    it('should handle empty value', () => {
      const wrapper = mountWithIntl(
        <NotificationTitleSection {...defaultProps} value="" />
      );
      const input = wrapper.find(CapInput);
      expect(input.prop('value')).toBe('');
    });

    it('should handle long value up to maxLength', () => {
      const longValue = 'A'.repeat(NOTIFICATION_TITLE_MAX_LENGTH);
      const wrapper = mountWithIntl(
        <NotificationTitleSection {...defaultProps} value={longValue} />
      );
      const input = wrapper.find(CapInput);
      expect(input.exists()).toBe(true);
    });
  });
});

