import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
import { UiAutocompleteItemComponent } from './autocomplete-item.component';

describe('UiSearchboxAutocompleteItem', () => {
  let spectator: SpectatorHost<UiAutocompleteItemComponent>;
  const createComponent = createHostFactory(UiAutocompleteItemComponent);

  beforeEach(() => (spectator = createComponent(`<button [uiAutocompleteItem]="item">My Autocomplete Item</button>`)));

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

  it('should set the class ui-autocomplete-item', () => {
    expect(spectator.element).toHaveClass('ui-autocomplete-item');
  });

  it('should not have class active if isActive is false', () => {
    spectator.component.isActive = false;
    spectator.detectChanges();
    expect(spectator.element).not.toHaveClass('active');
  });

  it('should have class active if isActive is true', () => {
    spectator.component.isActive = true;
    spectator.detectChanges();
    expect(spectator.element).toHaveClass('active');
  });

  it('should not be disabled if disabled is false', () => {
    spectator.setInput({ disabled: false });
    spectator.detectChanges();
    expect(spectator.element).not.toBeDisabled();
  });

  it('should be disabled if disabled is true', () => {
    spectator.setInput({ disabled: true });
    spectator.detectChanges();
    expect(spectator.element).toBeDisabled();
  });

  it('should display the content', () => {
    expect(spectator.element).toHaveText('My Autocomplete Item');
  });

  it('should call handleClickEvent on click', () => {
    spyOn(spectator.component, 'handleClickEvent');
    spectator.click();
    expect(spectator.component.handleClickEvent).toHaveBeenCalled();
  });

  describe('setActiveStyles', () => {
    it('should set isActive to true', () => {
      spectator.component.setActiveStyles();
      expect(spectator.component.isActive).toBe(true);
    });
  });

  describe('setInactiveStyles', () => {
    it('should set isActive to false', () => {
      spectator.component.setInactiveStyles();
      expect(spectator.component.isActive).toBe(false);
    });
  });

  describe('registerOnClick()', () => {
    it('should set onClick', () => {
      const fn = (item: any) => item?.data;
      spectator.component.registerOnClick(fn);
      expect(spectator.component.onClick).toBe(fn);
    });
  });

  describe('handleClickEvent()', () => {
    it('should call onClick with the item', () => {
      const item = { unit: 'test' };
      spectator.setInput({ item });
      spectator.detectComponentChanges();
      spyOn(spectator.component, 'onClick');

      spectator.component.handleClickEvent();
      expect(spectator.component.onClick).toHaveBeenCalledWith(item);
    });
  });
});
