import { Page } from "@playwright/test"
import { DashboardPage } from "../dashboard.page"

export class ProfilePage extends DashboardPage {
    constructor(page: Page) {
        super(page)
    }

    get profileLoc() {
        return {
            title: this.genLoc(`//h2[@class='title-profile']`),
            firstNameInput: this.genLoc(`//input[@name="first_name"]`),
            lastNameInput: this.genLoc(`//input[@name="last_name"]`),
            saveButton: this.genLoc(`//button[@type='submit' and normalize-space()='Update']`),
            userProfileAvatar: this.genLoc(`//div[@id="user-profile"]`),
            inputAvatar: this.genLoc(`//input[@type='file']`),
            inputEmail: this.genLoc(`//input[@name='email']`),
            avatarErrorMessage: this.genLoc(`//div[contains(@class, 'error-avatars')]`),
            inputPhone: this.genLoc(`//input[@name='phone_number']`),
            inputAddress: this.genLoc(`//input[@name='address_1']`),
            inputSuite: this.genLoc(`//input[@name='address_2']`),
            inputCity: this.genLoc(`//input[@name='city']`),
            customSelectState: this.genLoc(`//div[contains(@class, 'selectize selectize-control')]`),
            customInputState: this.genLoc(`//input[@name='new-password']`),
            optionState: this.genLoc(`//option`),
            inputZip: this.genLoc(`//input[@name='zip_code']`),

            // Change password loc
            mainContainer: this.genLoc(`//div[@class='col-lg-9']`),
            currentPasswordInput: this.genLoc(`//input[@name='current_password']`),
            newPasswordInput: this.genLoc(`//input[@name='password']`),
            confirmPasswordInput: this.genLoc(`//input[@name='password_confirmation']`),

            // Two factor loc
            twoFactorMenu: this.genLoc(`//a[contains(@href, '?tab=2fa')]`),
            setup2FaButton: this.genLoc(`//a[contains(@class, 'btn-setup-mfa')]`),
            twoFactorSetupQR: this.genLoc(`//div[contains(@class, 'two-fa-step-2')]/div`).first(),
            mfaSecretInput: this.genLoc(`//input[@name='mfa_secret']`),
            mfaToken: this.genLoc("//input[@name='_token']"),
            digitInput: (digitNum: number) => this.genLoc(`//input[@id="digit-${digitNum}"]`),
            submitButton: this.genLoc(`//button[@type='submit' and normalize-space()='Submit']`),
            disable2FaButton: this.genLoc(`//a[contains(@class, 'btn-disable-mfa')]`),
            confirmButton: this.genLoc(`//button[@type='submit' and normalize-space()='Confirm']`),
            btnClosePopup: this.genLoc("//a[@class='btn-close']")
        }
    }

    async open() {
        await this.page.goto('profile')
    }

    async openTwoFactorSetup() {
        await this.page.goto('profile?tab=2fa&action=setup')
    }

    async openTwoFactorDisable() {
        await this.page.goto('profile?tab=2fa&action=disable')
    }
}