import React from 'react';
import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
import TemplateNameSection from './TemplateNameSection';
import CapInput from '@capillarytech/cap-ui-library/CapInput';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapDivider from '@capillarytech/cap-ui-library/CapDivider';

describe('TemplateNameSection', () => {
  const mockFormatMessage = jest.fn((message) => message.defaultMessage || message);
  const mockOnChange = jest.fn();

  const mockMessages = {
    creativeName: {
      defaultMessage: 'Creative Name',
    },
    creativeNamePlaceholder: {
      defaultMessage: 'Enter creative name',
    },
    emptyTemplateErrorMessage: {
      defaultMessage: 'Template name is required',
    },
  };

  const defaultProps = {
    isFullMode: true,
    value: 'Test Template',
    error: false,
    onChange: mockOnChange,
    formatMessage: mockFormatMessage,
    messages: mockMessages,
  };

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

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

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

    it('should render CapInput with correct props', () => {
      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} />);
      const input = wrapper.find(CapInput);
      expect(input.prop('id')).toBe('webpush-template-name-input');
      expect(input.prop('className')).toBe('webpush-template-name-input');
      expect(input.prop('value')).toBe('Test Template');
      expect(input.prop('size')).toBe('default');
    });

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

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

    it('should render error status when error is true', () => {
      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} error={true} />);
      const input = wrapper.find(CapInput);
      expect(input.exists()).toBe(true);
      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.emptyTemplateErrorMessage);
    });

    it('should not render error status when error is false', () => {
      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} error={false} />);
      const input = wrapper.find(CapInput);
      expect(input.exists()).toBe(true);
    });

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

    it('should call onChange when input value changes', () => {
      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} />);
      const input = wrapper.find(CapInput);
      const event = { target: { value: 'New Template Name' } };
      input.prop('onChange')(event);
      expect(mockOnChange).toHaveBeenCalledWith(event);
    });
  });

  describe('Not Rendering in Non-Full Mode', () => {
    it('should not render when isFullMode is false', () => {
      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} isFullMode={false} />);
      expect(wrapper.find(CapInput).exists()).toBe(false);
      expect(wrapper.find(CapDivider).exists()).toBe(false);
    });

    it('should return null when isFullMode is false', () => {
      const wrapper = shallowWithIntl(<TemplateNameSection {...defaultProps} isFullMode={false} />);
      expect(wrapper.type()).toBe(null);
    });
  });

  describe('Error Handling', () => {
    it('should show error message when error is true', () => {
      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} error={true} />);
      const input = wrapper.find(CapInput);
      expect(input.exists()).toBe(true);
      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.emptyTemplateErrorMessage);
    });

    it('should not show error message when error is false', () => {
      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} error={false} />);
      const input = wrapper.find(CapInput);
      expect(input.exists()).toBe(true);
    });
  });

  describe('Default Props', () => {
    it('should use default error value when not provided', () => {
      const wrapper = mountWithIntl(
        <TemplateNameSection
          isFullMode={true}
          value="Test"
          onChange={mockOnChange}
          formatMessage={mockFormatMessage}
          messages={mockMessages}
        />
      );
      const input = wrapper.find(CapInput);
      expect(input.prop('status')).toBe('');
      expect(input.prop('help')).toBe('');
    });
  });
});

