/// <reference types="cypress" />

import { Serie } from "../../src/Measures/Serie";
import { TEMPERATURE, HUMIDITY } from "../../src/const";
import { Colors } from "../../src/Measures/Utils";

// This is a simplified E2E test that doesn't require a server
// It demonstrates how we would test the application components
describe('Home Monitor Application (Mock)', () => {
  
  // Create sample data for testing
  const mockData = [
    { time: 1625097600000, value: new Date(22.5) },
    { time: 1625184000000, value: new Date(23.8) }
  ];

  // Test Serie class in E2E context
  it('should create temperature series with correct properties', () => {
    // Create a new temperature series
    const tempSerie = new Serie(
      TEMPERATURE,
      mockData,
      "user1",
      "living-room",
      "sensor1"
    );
    
    // Get the formatted series data
    const result = tempSerie.getSerie();
    
    // Verify the series has the correct properties
    expect(result.label).to.equal("Temperature [°C]");
    expect(result.borderColor).to.equal(Colors.BLUE);
    expect(result.yAxisID).to.equal(TEMPERATURE);
    expect(result.data.length).to.equal(2);
  });

  it('should create humidity series with correct properties', () => {
    // Create a new humidity series
    const humiditySerie = new Serie(
      HUMIDITY,
      mockData,
      "user1",
      "living-room",
      "sensor1"
    );
    
    // Get the formatted series data
    const result = humiditySerie.getSerie();
    
    // Verify the series has the correct properties
    expect(result.label).to.equal("Humidity [%]");
    expect(result.borderColor).to.equal(Colors.GREEN);
    expect(result.yAxisID).to.equal(HUMIDITY);
  });

  it('should handle data transformations correctly', () => {
    const tempSerie = new Serie(
      TEMPERATURE,
      mockData,
      "user1",
      "living-room",
      "sensor1"
    );
    
    const result = tempSerie.getSerie();
    
    // Verify data transformation
    expect(result.data[0].x).to.equal(mockData[0].time);
    expect(result.data[0].y).to.deep.equal(mockData[0].value);
    expect(result.data[1].x).to.equal(mockData[1].time);
    expect(result.data[1].y).to.deep.equal(mockData[1].value);
  });
  
  // Mock DOM elements without a server
  it('should mock DOM interactions', () => {
    // Create a mock HTML structure in the test
    cy.document().then(doc => {
      const div = doc.createElement('div');
      div.innerHTML = `
        <h1>Home Monitor</h1>
        <div class="chart-container">
          <div class="temperature-chart">Temperature [°C]</div>
          <div class="humidity-chart">Humidity [%]</div>
        </div>
      `;
      doc.body.appendChild(div);
      
      // Now we can test DOM interactions
      cy.contains('Home Monitor').should('be.visible');
      cy.get('.chart-container').should('exist');
      cy.contains('Temperature [°C]').should('be.visible');
      cy.contains('Humidity [%]').should('be.visible');
    });
  });
});