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

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

    async open() {
        await this.page.goto('/setting/members');
    }

    async openCustomizedColumn() {
        await this.page.click("//span[contains(@data-bs-toggle,'dropdown')]");
        await this.page.click("//span[contains(@class, 'dropdown-item') and normalize-space()='Customized Columns']");
    }

    get memberLoc() {
        return {
            detailPage: this.genLoc("//div[@class='card-body p-3']"),
            btnUpdateDetail: this.genLoc("//button[text()='Update']")
        }
    }

    get memberDetail() {
        return {
            inputField: (field: string) => this.genLoc(`//input[@name='${field}']`),
            inputDetailForm: [
                {
                    name: "address_1",
                    error: "The address field must not be greater than 100 characters."
                },
                {
                    name: "address_2",
                    error: "The suite, unit, etc field must not be greater than 100 characters."
                },
                {
                    name: "city",
                    error: "The city field must not be greater than 50 characters."
                },
                {
                    name: "zip_code",
                    error: "The zip code field must not be greater than 50 characters."
                },
            ]
        }
    }

    get memberProps() {
        return {
            threeDotDropdownMenus: {
                customizedColumn: 'Customized Columns',
            },
            customizedColumns: [
                {
                    name: 'Full Name',
                    default: true,
                    tableDisplayName: 'Full Name'
                },
                {
                    name: 'Phone Number',
                    default: true,
                    tableDisplayName: 'Phone Number'
                },
                {
                    name: 'Email Address',
                    default: true,
                    tableDisplayName: 'Email Address'
                },
                {
                    name: 'Address',
                    default: true,
                    tableDisplayName: 'Address'
                },
                {
                    name: 'Status',
                    default: true,
                    tableDisplayName: 'Status'
                },
                {
                    name: 'Date',
                    default: false,
                    tableDisplayName: 'Date'
                },
                {
                    name: 'Updated',
                    default: false,
                    tableDisplayName: 'Updated'
                }
            ]
        }
    }
}
