import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { ActionTypes, StateInterface } from './reducers';

/**
 * This is a test script to verify that the toggleSources function correctly updates the Redux store.
 *
 * To use this script:
 * 1. Import it in a component where you want to test
 * 2. Call the testToggleSourcesAction() function
 * 3. Check the console logs to verify the state changes
 */
export class ToggleSourcesTest {
  constructor(private store: Store<StateInterface>) {}

  testToggleSourcesAction() {
    console.log('Testing toggleSources action...');

    // Get the current state of displaySourcesPanelLarge
    let currentState = false;
    this.store.select(state => state.app.displaySourcesPanelLarge).subscribe(value => {
      currentState = value;
      console.log('Current displaySourcesPanelLarge state:', currentState);
    });

    // Dispatch the action to toggle the state
    console.log('Dispatching UPDATE_APP action to toggle displaySourcesPanelLarge...');
    this.store.dispatch({
      type: ActionTypes.UPDATE_APP,
      payload: {
        displaySourcesPanelLarge: !currentState
      }
    });

    // Verify the state has changed
    setTimeout(() => {
      this.store.select(state => state.app.displaySourcesPanelLarge).subscribe(value => {
        console.log('New displaySourcesPanelLarge state:', value);
        console.log('State changed correctly:', value !== currentState);
      });
    }, 100);
  }
}
