import { TestBed, ComponentFixture } from "@angular/core/testing";
import { CommonModule } from "@angular/common";
import { FormGroup } from "@angular/forms";
import { By } from "@angular/platform-browser";

import { SamFilterModule } from "./filters.module";
import { FormlySAMUIModule } from "../../formly";
import { SamFiltersComponent } from "./filters.component";
import { SamPageNextService, DataStore, layoutStore } from "../experimental";
import { SamUIKitModule } from "../sam-ui-elements.module";

describe("The Sam Filters Component", () => {
  describe("rendered tests", () => {
    let component: SamFiltersComponent;
    let fixture: ComponentFixture<SamFiltersComponent>;

    beforeEach(() => {
      TestBed.configureTestingModule({
        imports: [
          CommonModule,
          SamUIKitModule,
          FormlySAMUIModule,
          SamFilterModule,
        ],
        providers: [
          {
            provide: DataStore,
            useValue: layoutStore,
          },
          SamPageNextService,
        ],
      });

      fixture = TestBed.createComponent(SamFiltersComponent);
      component = fixture.componentInstance;
      component.fields = [
        {
          key: "test",
          type: "text",
          templateOptions: {
            label: "Test",
            name: "test",
            id: "test",
          },
        },
        {
          key: "autocomplete",
          type: "autocomplete",
          templateOptions: {
            label: "Autocomplete",
            name: "autocomplete",
            id: "autocomplete",
          },
        },
        {
          key: "autocompleteMultiselect",
          type: "autocomplete-multiselect",
          templateOptions: {
            label: "Autocomplete multiselcet",
            name: "autocomplete-multiselect",
            id: "autocomplete-multiselect",
          },
        },
        {
          key: "checkbox",
          type: "checkbox",
          templateOptions: {
            label: "checkbox",
            name: "checkbox",
            id: "checkbox",
            options: [],
          },
        },
        {
          key: "date",
          type: "date",
          templateOptions: {
            label: "Date",
            name: "date",
            id: "date",
          },
        },
        {
          key: "dateRange",
          type: "date-range",
          templateOptions: {
            name: "dateRange",
            label: "dateRange",
            id: "dateRange",
          },
        },
        {
          key: "number",
          type: "number",
          templateOptions: {
            name: "number",
            label: "number",
            id: "number",
          },
        },
        {
          key: "radio",
          type: "radio",
          templateOptions: {
            name: "radio",
            label: "radio",
            id: "radio",
          },
        },
      ];
      component.form = new FormGroup({});
      component.model = { test: null };
    });

    it("should render SamTextComponent", () => {
      fixture.detectChanges();
      const text = fixture.debugElement.query(By.css("sam-text"));
      expect(text).not.toBeNull();
    });

    it("should render SamAutocompleteComponent", () => {
      fixture.detectChanges();
      const autocomplete = fixture.debugElement.query(
        By.css("sam-autocomplete")
      );
      expect(autocomplete).not.toBeNull();
    });

    it("should render SamAutocompleteMultiselectComponent", () => {
      fixture.detectChanges();
      const autcompleteM = fixture.debugElement.query(
        By.css("sam-autocomplete-multiselect")
      );
      expect(autcompleteM).not.toBeNull();
    });

    it("should render SamCheckboxComponent", () => {
      fixture.detectChanges();
      const checkbox = fixture.debugElement.query(By.css("sam-checkbox"));
      expect(checkbox).not.toBeNull();
    });

    it("should render SamDateComponent", () => {
      fixture.detectChanges();
      const date = fixture.debugElement.query(By.css("sam-date"));
      expect(date).not.toBeNull();
    });

    it("should render SamDateRangeComponent", () => {
      fixture.detectChanges();
      const dateR = fixture.debugElement.query(By.css("sam-date-range"));
      expect(dateR).not.toBeNull();
    });

    it("should render SamNumberComponent", () => {
      fixture.detectChanges();
      const number = fixture.debugElement.query(By.css("sam-number"));
      expect(number).not.toBeNull();
    });

    it("should render SamRadioComponent", () => {
      fixture.detectChanges();
      const radio = fixture.debugElement.query(By.css("sam-radio-button"));
      expect(radio).not.toBeNull();
    });

    it("pushes fields to the page service's filterFields property when provided", () => {
      const service = TestBed.inject(SamPageNextService);
      const setValueSpy = vi.spyOn(service.get("filterFields"), "setValue");

      component.ngOnChanges({
        fields: {
          previousValue: undefined,
          currentValue: component.fields,
          firstChange: true,
          isFirstChange: () => true,
        },
      });

      expect(setValueSpy).toHaveBeenCalledWith(component.fields);
    });

    it("does nothing when ngOnChanges fires without a fields change", () => {
      const service = TestBed.inject(SamPageNextService);
      const setValueSpy = vi.spyOn(service.get("filterFields"), "setValue");

      component.ngOnChanges({});

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