import { Page, expect } from '@playwright/test';

export class RegistrationPage {
    readonly page: Page;
    
    // Form Selectors
    private readonly usernameInput = '#user_login';
    private readonly emailInput = '#user_email';
    private readonly passwordInput = '#pass1';
    private readonly confirmPasswordInput = '#pass2';
    private readonly firstNameInput = '#first_name';
    private readonly lastNameInput = '#last_name';
    private readonly companyInput = '#company_name';
    private readonly phoneInput = '#phone_number';
    private readonly countrySelect = '#country';
    private readonly stateSelect = '#state';
    private readonly profileImageInput = '#profile_image';
    private readonly submitButton = 'button[type="submit"]';
    private readonly errorMessages = '.form-error';
    private readonly successMessage = '.registration-success';

    constructor(page: Page) {
        this.page = page;
    }

    async goto() {
        await this.page.goto('/register');
    }

    async fillRegistrationForm({
        username,
        email,
        password,
        confirmPassword,
        firstName,
        lastName,
        company,
        phone,
        country,
        state,
        profileImagePath
    }: {
        username: string;
        email: string;
        password: string;
        confirmPassword: string;
        firstName: string;
        lastName: string;
        company?: string;
        phone?: string;
        country?: string;
        state?: string;
        profileImagePath?: string;
    }) {
        await this.page.fill(this.usernameInput, username);
        await this.page.fill(this.emailInput, email);
        await this.page.fill(this.passwordInput, password);
        await this.page.fill(this.confirmPasswordInput, confirmPassword);
        await this.page.fill(this.firstNameInput, firstName);
        await this.page.fill(this.lastNameInput, lastName);

        if (company) {
            await this.page.fill(this.companyInput, company);
        }
        if (phone) {
            await this.page.fill(this.phoneInput, phone);
        }
        if (country) {
            await this.page.selectOption(this.countrySelect, country);
            // Wait for state options to load if country is selected
            await this.page.waitForTimeout(1000);
        }
        if (state) {
            await this.page.selectOption(this.stateSelect, state);
        }
        if (profileImagePath) {
            await this.page.setInputFiles(this.profileImageInput, profileImagePath);
        }
    }

    async submit() {
        await this.page.click(this.submitButton);
    }

    async getErrorMessages() {
        const errors = await this.page.locator(this.errorMessages).all();
        return Promise.all(errors.map(error => error.textContent()));
    }

    async getSuccessMessage() {
        const success = await this.page.locator(this.successMessage);
        return success.textContent();
    }

    async isFieldRequired(selector: string) {
        const field = await this.page.locator(selector);
        return await field.evaluate((el) => el.hasAttribute('required'));
    }

    async isStateSelectVisible() {
        const stateSelect = await this.page.locator(this.stateSelect);
        return await stateSelect.isVisible();
    }

    async getStateOptions() {
        const stateSelect = await this.page.locator(this.stateSelect);
        return await stateSelect.evaluate((el) => {
            return Array.from(el.getElementsByTagName('option')).map(option => ({
                value: option.value,
                text: option.textContent
            }));
        });
    }
}