import { expect, type Locator, type Page } from '@playwright/test';
import { expectedHalloText, expectedMainHeading,expectedHalloToHaveText2, expectedHalloToHaveText1, expectedSearchPlaceholder } from '../assets/texts/textHelpers';


// TODO: 
// Footer

export class HomePage {
  readonly page: Page;
  readonly url: string = "https://endeavouros.cz";
  
  // Lokátory definujeme jako vlastnosti třídy
  readonly mainHeading: Locator;
  readonly halloDescription: Locator;
  readonly halloDescription2: Locator;
  readonly menuLinks: Locator;
  readonly cardContainer: Locator;
  readonly searchInput: Locator;
  readonly switchTheme: Locator;


  constructor(page: Page) {
    this.page = page;
    this.mainHeading = page.getByRole('heading', { name: expectedMainHeading });
    this.halloDescription = page.getByText(expectedHalloToHaveText1);
    this.halloDescription2 = page.getByText(expectedHalloToHaveText2);
    this.menuLinks = page.locator('.menu-item a'); // Předpokládaný selektor pro odkazy v menu
    this.cardContainer = page.locator('.elementor-widget-container'); // doplnit
    this.searchInput = page.getByPlaceholder(expectedSearchPlaceholder);
    this.switchTheme = this.page.locator('#themeToggle');
  }

  async navigate() {
    await this.page.goto(this.url);
  }

  // Otestování, zda jsou všechny odkazy v menu viditelné.
  async checkMenuTexts(expectedTexts: string[]) {
    for (const text of expectedTexts) {
      const item = this.page.getByText(text, { exact: true });
      await expect(item).toBeVisible();
    }
  }

  // Otestování, zda je zadaný text viditelný na stránce
  async checkHalloText(expectedText: string) {
    const item = this.page.getByText(expectedText);
    await expect(item).toBeVisible();
  }

  
  // test interní odkazy
  async clickMenuItem(name: string) {
    await this.page.getByRole('link', { name: name, exact: true }).click();
  }

  // test externí odkazy --> nejde složitější řešení
  async getMenuItemHref(name: string): Promise<string> {
    const link = this.page.getByRole('link', { name: name, exact: true });
    const href = await link.getAttribute('href');
    if (!href) throw new Error(`Odkaz s textem "${name}" nemá definované href!`);
    return href;
  }
  // test externí odkazy 
  async getMenuItemLinkHref(name: string): Promise<string | null> {
    const link = this.page.getByRole('link', { name: name, exact: true });
    return await link.getAttribute('href');
  }

  
  /* Karty */

  
    // Najde kartu podle nadpisu a ověří, že obsahuje očekávaný text
    async verifyCardContent(title: string, description:string) {
      // Najdeme konkrétní kartu, která obsahuje daný nadpis (h2, h3...)
      const card = this.page.locator('.article-grid').filter({ hasText: title }).last();
      const cardDescription = this.page.locator('.article-grid').filter({ hasText: description }).last();

      
      await expect(card).toBeVisible();
      await expect(cardDescription).toBeVisible();
      // Ověříme, že v této kartě je i správný popis
      await expect(card).toContainText(title);
      await expect(cardDescription).toContainText(description);
    }
  
    /**
     * Klikne na tlačítko "Více" nebo odkaz v konkrétní kartě
     */
    async clickCardButton(title: string) {
      const card = this.page.locator('section, div').filter({ hasText: title }).last();
      await card.getByRole('link').first().click();
    }

  /*
  * Test theme
  */
  // Test Theme Light
  async switchThemeFunctionLight() {
    const themeButton = this.page.locator('#themeToggle'); 
    await themeButton.click();
    await expect(this.page.locator('html')).toHaveAttribute('data-theme', 'light');
  }

  // Test Theme Dark
  async switchThemeFunctionDark() {
    const themeButton = this.page.locator('#themeToggle'); 
    await themeButton.click();
    await expect(this.page.locator('html')).toHaveAttribute('data-theme', 'dark');
  }
  }