import React from 'react';
import { act } from 'react-dom/test-utils';
import { mountWithIntl, shallowWithIntl } from '../../../../../helpers/intl-enzym-test-helpers';
import PreviewControls from '../PreviewControls';
import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
import { LAYOUT_MODE, SELECT_WIDTH, OS_OPTIONS, BROWSER_OPTIONS, STATE_OPTIONS } from '../constants';
import { getBrowserOptionsForOS } from '../config/notificationMappings';

describe('PreviewControls', () => {
  const mockOnOSChange = jest.fn();
  const mockOnBrowserChange = jest.fn();
  const mockOnStateChange = jest.fn();

  const defaultProps = {
    selectedOS: 'macOS',
    selectedBrowser: 'Chrome',
    selectedState: 'Collapsed',
    osOptions: OS_OPTIONS,
    browserOptions: BROWSER_OPTIONS,
    stateOptions: STATE_OPTIONS,
    onOSChange: mockOnOSChange,
    onBrowserChange: mockOnBrowserChange,
    onStateChange: mockOnStateChange,
    layoutMode: LAYOUT_MODE.NEW_ROW,
    showStateDropdown: true,
  };

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

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

    it('should render OS and Browser dropdowns', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
      const selects = wrapper.find(CapSelect.CapCustomSelect);
      expect(selects.length).toBeGreaterThanOrEqual(2);
    });

    it('should render State dropdown when showStateDropdown is true', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
      const selects = wrapper.find(CapSelect.CapCustomSelect);
      expect(selects.length).toBe(3);
    });

    it('should not render State dropdown when showStateDropdown is false', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={false} />);
      const selects = wrapper.find(CapSelect.CapCustomSelect);
      expect(selects.length).toBe(2);
    });

    it('should render with minimal required props', () => {
      const minimalProps = {
        selectedOS: 'macOS',
        selectedBrowser: 'Chrome',
        osOptions: OS_OPTIONS,
        browserOptions: BROWSER_OPTIONS,
        onOSChange: mockOnOSChange,
        onBrowserChange: mockOnBrowserChange,
        stateOptions: [],
      };
      const wrapper = shallowWithIntl(<PreviewControls {...minimalProps} />);
      expect(wrapper.exists()).toBe(true);
    });
  });

  describe('Layout Modes', () => {
    describe('NEW_ROW layout mode', () => {
      it('should render in newRow layout mode by default', () => {
        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.NEW_ROW} />);
        const rows = wrapper.find(CapRow);
        expect(rows.length).toBeGreaterThanOrEqual(1);
      });

      it('should render OS and Browser in first row', () => {
        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.NEW_ROW} />);
        const firstRow = wrapper.find(CapRow).first();
        const osColumn = firstRow.find('.preview-control-os');
        const browserColumn = firstRow.find('.preview-control-browser');
        expect(osColumn.exists()).toBe(true);
        expect(browserColumn.exists()).toBe(true);
      });

      it('should render State in separate row when showStateDropdown is true', () => {
        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.NEW_ROW} showStateDropdown={true} />);
        const stateRow = wrapper.find('.preview-controls-state');
        expect(stateRow.exists()).toBe(true);
        const stateColumn = stateRow.find('.preview-control-state');
        expect(stateColumn.exists()).toBe(true);
      });

      it('should use full width for selects in newRow mode', () => {
        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.NEW_ROW} />);
        const selects = wrapper.find(CapSelect.CapCustomSelect);
        selects.forEach((select) => {
          expect(select.prop('width')).toBe(SELECT_WIDTH.FULL);
        });
      });
    });

    describe('INLINE layout mode', () => {
      it('should render in inline layout mode', () => {
        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.INLINE} />);
        const rows = wrapper.find(CapRow);
        expect(rows.length).toBeGreaterThanOrEqual(1);
      });

      it('should render State in same row structure when inline', () => {
        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.INLINE} showStateDropdown={true} />);
        const stateRow = wrapper.find(CapRow).filterWhere((row) => row.find('.preview-control-state').exists());
        expect(stateRow.exists()).toBe(true);
      });

      it('should use full width for selects in inline mode', () => {
        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.INLINE} />);
        const selects = wrapper.find(CapSelect.CapCustomSelect);
        selects.forEach((select) => {
          expect(select.prop('width')).toBe(SELECT_WIDTH.FULL);
        });
      });
    });

    describe('COMPACT layout mode', () => {
      it('should render in compact layout mode', () => {
        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} />);
        const compactContainer = wrapper.find('.preview-controls-compact');
        expect(compactContainer.exists()).toBe(true);
      });

      it('should render all controls in compact container', () => {
        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} showStateDropdown={true} />);
        const compactContainer = wrapper.find('.preview-controls-compact');
        const controls = compactContainer.find('.preview-control');
        expect(controls.length).toBe(3);
      });

      it('should use compact width for selects in compact mode', () => {
        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} />);
        const selects = wrapper.find(CapSelect.CapCustomSelect);
        selects.forEach((select) => {
          expect(select.prop('width')).toBe(SELECT_WIDTH.COMPACT);
        });
      });

      it('should render State dropdown in compact mode when showStateDropdown is true', () => {
        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} showStateDropdown={true} />);
        const stateControl = wrapper.find('.preview-control-state');
        expect(stateControl.exists()).toBe(true);
      });

      it('should not render State dropdown in compact mode when showStateDropdown is false', () => {
        const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} showStateDropdown={false} />);
        const stateControl = wrapper.find('.preview-control-state');
        expect(stateControl.exists()).toBe(false);
      });
    });
  });

  describe('Option Switching - OS Changes', () => {
    it('should call onOSChange when OS is changed', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      
      act(() => {
        osSelect.prop('onChange')('Windows');
      });

      expect(mockOnOSChange).toHaveBeenCalledWith('Windows');
      expect(mockOnOSChange).toHaveBeenCalledTimes(1);
    });

    it('should reset Browser to first available option when OS changes', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
      
      // Change OS to Windows
      act(() => {
        osSelect.prop('onChange')('Windows');
      });

      // Browser should be reset to first available option for Windows
      const windowsBrowserOptions = getBrowserOptionsForOS('Windows');
      expect(mockOnBrowserChange).toHaveBeenCalledWith(windowsBrowserOptions[0].value);
    });

    it('should reset State to first available option when OS changes and showStateDropdown is true', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      
      act(() => {
        osSelect.prop('onChange')('Windows');
      });

      // State should be reset to first option
      expect(mockOnStateChange).toHaveBeenCalledWith(STATE_OPTIONS[0].value);
    });

    it('should not reset State when OS changes if showStateDropdown is false', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={false} />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      
      act(() => {
        osSelect.prop('onChange')('Windows');
      });

      expect(mockOnStateChange).not.toHaveBeenCalled();
    });

    it('should handle OS change when browserOptions is empty', () => {
      const props = {
        ...defaultProps,
        browserOptions: [],
      };
      const wrapper = mountWithIntl(<PreviewControls {...props} />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      
      act(() => {
        osSelect.prop('onChange')('Windows');
      });

      expect(mockOnOSChange).toHaveBeenCalledWith('Windows');
      // onBrowserChange will be called with first option from getBrowserOptionsForOS
      // even if browserOptions prop is empty, because the handler uses getBrowserOptionsForOS
      const windowsBrowserOptions = getBrowserOptionsForOS('Windows');
      if (windowsBrowserOptions && windowsBrowserOptions.length > 0) {
        expect(mockOnBrowserChange).toHaveBeenCalledWith(windowsBrowserOptions[0].value);
      }
    });

    it('should handle OS change when onBrowserChange is not provided', () => {
      const props = {
        ...defaultProps,
        onBrowserChange: undefined,
      };
      const wrapper = mountWithIntl(<PreviewControls {...props} />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      
      act(() => {
        osSelect.prop('onChange')('Windows');
      });

      expect(mockOnOSChange).toHaveBeenCalledWith('Windows');
      // Should not throw error
      expect(wrapper.exists()).toBe(true);
    });

    it('should handle OS change when stateOptions is empty', () => {
      const props = {
        ...defaultProps,
        stateOptions: [],
      };
      const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      
      act(() => {
        osSelect.prop('onChange')('Windows');
      });

      expect(mockOnOSChange).toHaveBeenCalledWith('Windows');
      // onStateChange should not be called if no state options
      expect(mockOnStateChange).not.toHaveBeenCalled();
    });

    it('should handle OS change when onStateChange is not provided', () => {
      const props = {
        ...defaultProps,
        onStateChange: undefined,
      };
      const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      
      act(() => {
        osSelect.prop('onChange')('Windows');
      });

      expect(mockOnOSChange).toHaveBeenCalledWith('Windows');
      // Should not throw error
      expect(wrapper.exists()).toBe(true);
    });
  });

  describe('Option Switching - Browser Changes', () => {
    it('should call onBrowserChange when Browser is changed', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
      
      act(() => {
        browserSelect.prop('onChange')('Firefox');
      });

      expect(mockOnBrowserChange).toHaveBeenCalledWith('Firefox');
      expect(mockOnBrowserChange).toHaveBeenCalledTimes(1);
    });

    it('should reset State to first available option when Browser changes and showStateDropdown is true', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
      
      act(() => {
        browserSelect.prop('onChange')('Firefox');
      });

      // State should be reset to first option
      expect(mockOnStateChange).toHaveBeenCalledWith(STATE_OPTIONS[0].value);
    });

    it('should not reset State when Browser changes if showStateDropdown is false', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={false} />);
      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
      
      act(() => {
        browserSelect.prop('onChange')('Firefox');
      });

      expect(mockOnStateChange).not.toHaveBeenCalled();
    });

    it('should handle Browser change when stateOptions is empty', () => {
      const props = {
        ...defaultProps,
        stateOptions: [],
      };
      const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
      
      act(() => {
        browserSelect.prop('onChange')('Firefox');
      });

      expect(mockOnBrowserChange).toHaveBeenCalledWith('Firefox');
      // onStateChange should not be called if no state options
      expect(mockOnStateChange).not.toHaveBeenCalled();
    });

    it('should handle Browser change when onStateChange is not provided', () => {
      const props = {
        ...defaultProps,
        onStateChange: undefined,
      };
      const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
      
      act(() => {
        browserSelect.prop('onChange')('Firefox');
      });

      expect(mockOnBrowserChange).toHaveBeenCalledWith('Firefox');
      // Should not throw error
      expect(wrapper.exists()).toBe(true);
    });
  });

  describe('Option Switching - State Changes', () => {
    it('should call onStateChange when State is changed', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
      
      act(() => {
        stateSelect.prop('onChange')('Expanded');
      });

      expect(mockOnStateChange).toHaveBeenCalledWith('Expanded');
      expect(mockOnStateChange).toHaveBeenCalledTimes(1);
    });

    it('should not call onStateChange when State dropdown is not shown', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={false} />);
      // State select should not exist
      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).filterWhere(
        (select) => select.prop('options') === STATE_OPTIONS
      );
      expect(stateSelect.exists()).toBe(false);
    });
  });

  describe('Cascading Dropdown Behavior', () => {
    it('should cascade reset Browser and State when OS changes', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      
      act(() => {
        osSelect.prop('onChange')('Windows');
      });

      // OS change should trigger browser reset
      const windowsBrowserOptions = getBrowserOptionsForOS('Windows');
      expect(mockOnBrowserChange).toHaveBeenCalledWith(windowsBrowserOptions[0].value);
      
      // OS change should trigger state reset
      expect(mockOnStateChange).toHaveBeenCalledWith(STATE_OPTIONS[0].value);
    });

    it('should cascade reset State when Browser changes', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
      
      act(() => {
        browserSelect.prop('onChange')('Firefox');
      });

      // Browser change should trigger state reset
      expect(mockOnStateChange).toHaveBeenCalledWith(STATE_OPTIONS[0].value);
    });

    it('should maintain cascading behavior across multiple OS changes', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      
      // First OS change
      act(() => {
        osSelect.prop('onChange')('Windows');
      });
      
      jest.clearAllMocks();
      
      // Second OS change
      act(() => {
        osSelect.prop('onChange')('iOS');
      });

      // Should still cascade
      const iosBrowserOptions = getBrowserOptionsForOS('iOS');
      expect(mockOnBrowserChange).toHaveBeenCalledWith(iosBrowserOptions[0].value);
      expect(mockOnStateChange).toHaveBeenCalledWith(STATE_OPTIONS[0].value);
    });
  });

  describe('Props and Values', () => {
    it('should pass correct selectedOS value to OS select', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} selectedOS="Windows" />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      expect(osSelect.prop('value')).toBe('Windows');
    });

    it('should pass correct selectedBrowser value to Browser select', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} selectedBrowser="Firefox" />);
      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
      expect(browserSelect.prop('value')).toBe('Firefox');
    });

    it('should pass correct selectedState value to State select', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} selectedState="Expanded" showStateDropdown={true} />);
      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
      expect(stateSelect.prop('value')).toBe('Expanded');
    });

    it('should pass correct osOptions to OS select', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      expect(osSelect.prop('options')).toBe(OS_OPTIONS);
    });

    it('should pass correct browserOptions to Browser select', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
      expect(browserSelect.prop('options')).toBe(BROWSER_OPTIONS);
    });

    it('should pass correct stateOptions to State select', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
      expect(stateSelect.prop('options')).toBe(STATE_OPTIONS);
    });
  });

  describe('CSS Classes', () => {
    it('should apply correct CSS classes in newRow layout', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.NEW_ROW} />);
      const osColumn = wrapper.find('.preview-control-os');
      const browserColumn = wrapper.find('.preview-control-browser');
      expect(osColumn.exists()).toBe(true);
      expect(browserColumn.exists()).toBe(true);
    });

    it('should apply correct CSS classes in compact layout', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} />);
      const compactContainer = wrapper.find('.preview-controls-compact');
      expect(compactContainer.exists()).toBe(true);
      
      const osControl = compactContainer.find('.preview-control-os');
      const browserControl = compactContainer.find('.preview-control-browser');
      expect(osControl.exists()).toBe(true);
      expect(browserControl.exists()).toBe(true);
    });

    it('should apply preview-control class to each control in compact mode', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} layoutMode={LAYOUT_MODE.COMPACT} showStateDropdown={true} />);
      const controls = wrapper.find('.preview-control');
      expect(controls.length).toBe(3);
      expect(controls.at(0).hasClass('preview-control-os')).toBe(true);
      expect(controls.at(1).hasClass('preview-control-browser')).toBe(true);
      expect(controls.at(2).hasClass('preview-control-state')).toBe(true);
    });
  });

  describe('Edge Cases', () => {
    it('should handle empty osOptions array', () => {
      const props = {
        ...defaultProps,
        osOptions: [],
      };
      const wrapper = mountWithIntl(<PreviewControls {...props} />);
      expect(wrapper.exists()).toBe(true);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      expect(osSelect.prop('options')).toEqual([]);
    });

    it('should handle empty browserOptions array', () => {
      const props = {
        ...defaultProps,
        browserOptions: [],
      };
      const wrapper = mountWithIntl(<PreviewControls {...props} />);
      expect(wrapper.exists()).toBe(true);
      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
      expect(browserSelect.prop('options')).toEqual([]);
    });

    it('should handle empty stateOptions array', () => {
      const props = {
        ...defaultProps,
        stateOptions: [],
      };
      const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
      expect(wrapper.exists()).toBe(true);
      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
      expect(stateSelect.prop('options')).toEqual([]);
    });

    it('should handle undefined selectedState', () => {
      const props = {
        ...defaultProps,
        selectedState: undefined,
      };
      const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
      expect(wrapper.exists()).toBe(true);
      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
      expect(stateSelect.prop('value')).toBeUndefined();
    });

    it('should handle rapid option changes', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
      const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
      
      act(() => {
        osSelect.prop('onChange')('Windows');
        browserSelect.prop('onChange')('Firefox');
        stateSelect.prop('onChange')('Expanded');
      });

      expect(mockOnOSChange).toHaveBeenCalled();
      expect(mockOnBrowserChange).toHaveBeenCalled();
      expect(mockOnStateChange).toHaveBeenCalled();
    });

    it('should handle all OS options', () => {
      OS_OPTIONS.forEach((osOption) => {
        const props = {
          ...defaultProps,
          selectedOS: osOption.value,
        };
        const wrapper = mountWithIntl(<PreviewControls {...props} />);
        const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
        expect(osSelect.prop('value')).toBe(osOption.value);
      });
    });

    it('should handle all Browser options', () => {
      BROWSER_OPTIONS.forEach((browserOption) => {
        const props = {
          ...defaultProps,
          selectedBrowser: browserOption.value,
        };
        const wrapper = mountWithIntl(<PreviewControls {...props} />);
        const browserSelect = wrapper.find(CapSelect.CapCustomSelect).at(1);
        expect(browserSelect.prop('value')).toBe(browserOption.value);
      });
    });

    it('should handle all State options', () => {
      STATE_OPTIONS.forEach((stateOption) => {
        const props = {
          ...defaultProps,
          selectedState: stateOption.value,
        };
        const wrapper = mountWithIntl(<PreviewControls {...props} showStateDropdown={true} />);
        const stateSelect = wrapper.find(CapSelect.CapCustomSelect).at(2);
        expect(stateSelect.prop('value')).toBe(stateOption.value);
      });
    });
  });

  describe('Stability in Different Layout Modes', () => {
    it('should maintain functionality when switching from newRow to compact', () => {
      const props = {
        ...defaultProps,
        selectedOS: 'Windows',
        layoutMode: LAYOUT_MODE.NEW_ROW,
      };
      const wrapper = mountWithIntl(<PreviewControls {...props} />);
      const osSelect1 = wrapper.find(CapSelect.CapCustomSelect).first();
      expect(osSelect1.prop('value')).toBe('Windows');
      
      wrapper.setProps({ layoutMode: LAYOUT_MODE.COMPACT });
      wrapper.update();
      
      const osSelect2 = wrapper.find(CapSelect.CapCustomSelect).first();
      expect(osSelect2.prop('value')).toBe('Windows');
    });

    it('should maintain functionality when switching from compact to inline', () => {
      const props = {
        ...defaultProps,
        selectedBrowser: 'Firefox',
        layoutMode: LAYOUT_MODE.COMPACT,
      };
      const wrapper = mountWithIntl(<PreviewControls {...props} />);
      const browserSelect1 = wrapper.find(CapSelect.CapCustomSelect).at(1);
      expect(browserSelect1.prop('value')).toBe('Firefox');
      
      wrapper.setProps({ layoutMode: LAYOUT_MODE.INLINE });
      wrapper.update();
      
      const browserSelect2 = wrapper.find(CapSelect.CapCustomSelect).at(1);
      expect(browserSelect2.prop('value')).toBe('Firefox');
    });

    it('should maintain functionality when toggling showStateDropdown', () => {
      const props = {
        ...defaultProps,
        selectedState: 'Expanded',
        showStateDropdown: true,
      };
      const wrapper = mountWithIntl(<PreviewControls {...props} />);
      const stateSelect1 = wrapper.find(CapSelect.CapCustomSelect).at(2);
      expect(stateSelect1.prop('value')).toBe('Expanded');
      
      wrapper.setProps({ showStateDropdown: false });
      wrapper.update();
      
      const stateSelect2 = wrapper.find(CapSelect.CapCustomSelect).filterWhere(
        (select) => select.prop('options') === STATE_OPTIONS
      );
      expect(stateSelect2.exists()).toBe(false);
      
      wrapper.setProps({ showStateDropdown: true, selectedState: 'Expanded' });
      wrapper.update();
      
      const stateSelect3 = wrapper.find(CapSelect.CapCustomSelect).at(2);
      expect(stateSelect3.prop('value')).toBe('Expanded');
    });
  });

  describe('Integration with getBrowserOptionsForOS', () => {
    it('should use getBrowserOptionsForOS to get browser options when OS changes', () => {
      const getBrowserOptionsForOSSpy = jest.spyOn(require('../config/notificationMappings'), 'getBrowserOptionsForOS');
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      
      act(() => {
        osSelect.prop('onChange')('Windows');
      });

      expect(getBrowserOptionsForOSSpy).toHaveBeenCalledWith('Windows');
      getBrowserOptionsForOSSpy.mockRestore();
    });

    it('should handle OS that returns all browsers (macOS)', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} selectedOS="macOS" />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      
      act(() => {
        osSelect.prop('onChange')('macOS');
      });

      const macBrowserOptions = getBrowserOptionsForOS('macOS');
      expect(mockOnBrowserChange).toHaveBeenCalledWith(macBrowserOptions[0].value);
    });

    it('should handle OS that excludes Safari (Windows)', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} selectedOS="Windows" />);
      const osSelect = wrapper.find(CapSelect.CapCustomSelect).first();
      
      act(() => {
        osSelect.prop('onChange')('Windows');
      });

      const windowsBrowserOptions = getBrowserOptionsForOS('Windows');
      expect(windowsBrowserOptions.some(opt => opt.value === 'Safari')).toBe(false);
      expect(mockOnBrowserChange).toHaveBeenCalledWith(windowsBrowserOptions[0].value);
    });
  });

  describe('FormattedMessage Integration', () => {
    it('should render FormattedMessage for operatingSystem label', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
      const osLabel = wrapper.find('.preview-control-os').find('CapLabel');
      expect(osLabel.exists()).toBe(true);
    });

    it('should render FormattedMessage for browser label', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} />);
      const browserLabel = wrapper.find('.preview-control-browser').find('CapLabel');
      expect(browserLabel.exists()).toBe(true);
    });

    it('should render FormattedMessage for state label when showStateDropdown is true', () => {
      const wrapper = mountWithIntl(<PreviewControls {...defaultProps} showStateDropdown={true} />);
      const stateLabel = wrapper.find('.preview-control-state').find('CapLabel');
      expect(stateLabel.exists()).toBe(true);
    });
  });
});

