import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
import { ChipOptionComponent } from './chip-option.component';
import { ChipsComponent } from './chips.component';

describe('ChipOptionComponent', () => {
  let spectator: SpectatorHost<ChipOptionComponent<string>>;

  const createHost = createHostFactory({
    component: ChipOptionComponent<string>,
    imports: [ChipsComponent],
    template: `<ui-chips><ui-chip-option [value]="value"></ui-chip-option></ui-chips>`,
  });

  beforeEach(() => {
    spectator = createHost(undefined, {
      hostProps: {
        value: 'test',
      },
    });
  });

  it('should create', () => {
    expect(spectator.component).toBeTruthy();
  });

  it('should toggle selection on click', () => {
    // Arrange
    const mockSelect = jest.spyOn(spectator.component['host'], 'select');

    // Act
    spectator.click(spectator.element);

    // Assert
    expect(mockSelect).toHaveBeenCalledWith('test');
  });

  it('should apply selected class when selected', () => {
    // Arrange
    spectator.component['host'].select('test');
    spectator.detectChanges();

    // Assert
    expect(spectator.element).toHaveClass('ui-chip-option__selected');
  });

  describe('Edge Cases', () => {
    it('should handle null value gracefully', () => {
      // Arrange
      spectator.setHostInput('value', null);

      // Act
      spectator.click(spectator.element);

      // Assert
      expect(() => spectator.component.toggle()).not.toThrow();
    });

    it('should handle undefined value gracefully', () => {
      // Arrange
      spectator.setHostInput('value', undefined);

      // Act
      spectator.click(spectator.element);

      // Assert
      expect(() => spectator.component.toggle()).not.toThrow();
    });

    it('should not apply selected class for null value', () => {
      // Arrange
      spectator.setHostInput('value', null);
      spectator.detectChanges();

      // Assert
      expect(spectator.element).not.toHaveClass('ui-chip-option__selected');
    });

    it('should not apply selected class for undefined value', () => {
      // Arrange
      spectator.setHostInput('value', undefined);
      spectator.detectChanges();

      // Assert
      expect(spectator.element).not.toHaveClass('ui-chip-option__selected');
    });
  });
});
