import { expect, Page } from '@playwright/test';
import { DashboardPage, TableData } from '../dashboard.page';
import { getPropertyValues, modifierNullToDash } from '../../utils/array';

type Hashtag = {
    name?: string;
    type_name?: string;
    description?: string;
    createAnother?: boolean;
}

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

    async open() {
        await this.page.goto('/general/hashtags');
    }

    get generalProps() {
        return {
            threeDotDropdownMenus: {
                customizedColumn: 'Customized Columns',
            }
        }
    }

    get generalLoc() {
        return {
            // form add new hashtag
            btnAddNew: this.genLoc(`//button[contains(text(),'Add New')]`),
            inputCategory: this.genLoc(`//input[@placeholder='Select a category']`),
            inputHashtag: this.genLoc(`//input[@placeholder='Enter hashtag']`),
            inputDescription: this.genLoc(`//input[@placeholder='Enter description']`),
            btnCreate: this.genLoc(`//button[contains(text(),'Create')]`),
            checkboxCreateAnother: this.genLoc(`//input[contains(@id,'checkbox-create_contact')]`),
            btnClose: this.genLoc(`//h3[text()='Hashtag']/following-sibling::button`),
            btnUpdate: this.genLoc(`//button[contains(text(),'Update')]`),

            // Notification
            notificationAddNewHashtagSuccess: this.genLoc(`//p[contains(text(),'Added New Successfully!')]`),
            notificationUpdateHashtagSuccess: this.genLoc(`//p[contains(text(),'Updated Successfully!')]`),
            notificationDeleteHashtagSuccess: this.genLoc(`//p[contains(text(),'Deleted Successfully!')]`),
            btnClosePopupNotification: this.genLoc(`//button[@class='my-snackbar__close']`),

            // Delete Hashtag
            btnYes: this.genLoc(`//button[text()='Yes']`),
        }
    }

    getXpathHashtagInfoBy(name: string, type_name: string, description: string): { name: string, type_name: string, description: string } {
        return {
            name: `//td[1]/a[contains(text(),'${name}')]`,
            type_name: `//td[2]/a[contains(text(),'${type_name}')]`,
            description: `//td[3]/a[contains(text(),'${description}')]`
        };
    }

    getXpathToolTipHashtagInfoBy(description: string): { edit: string, delete: string } {
        return {
            edit: `//td/a[contains(text(),'${description}')]/parent::td/following-sibling::td[2]/div/div[@data-tooltip-content='Edit']`,
            delete: `//td/a[contains(text(),'${description}')]/parent::td/following-sibling::td[2]/div/div[@data-tooltip-content='Delete']`
        };
    }

    async addNewHashtag(hashtag: Hashtag) {
        await this.generalLoc.btnAddNew.click();
        await this.generalLoc.inputCategory.fill(hashtag.type_name ?? '');
        await this.page.locator(`//div[contains(text(),'${hashtag.type_name}')]`).click();
        await this.generalLoc.inputHashtag.fill(hashtag.name ?? '');
        await this.generalLoc.inputDescription.fill(hashtag.description ?? '');
        if (hashtag.createAnother) {
            await this.generalLoc.checkboxCreateAnother.click();
        }
        await this.generalLoc.btnCreate.click();
    }

    async editHashtag(hashtagDesc: string, hashtag: { name?: string, description?: string }) {
        await this.page.locator(this.getXpathToolTipHashtagInfoBy(hashtagDesc).edit).click();
        if (hashtag.name) {
            await this.generalLoc.inputHashtag.fill(hashtag.name);
        }
        if (hashtag.description) {
            await this.generalLoc.inputDescription.fill(hashtag.description);
        }
        await this.generalLoc.btnUpdate.click();
    }

    async deleteHashtag(hashtagDesc: string) {
        await this.page.locator(this.getXpathToolTipHashtagInfoBy(hashtagDesc).delete).click();
        await this.generalLoc.btnYes.click();
    }

    async getDataInTableGenaral(displayName: string, propertyName: string, tableApiUrl: string, haveVisibleRow?: boolean): Promise<TableData> {
        // Get data from table
        const order = await this.getTableHeadingOrder(displayName);
        expect(order, `Column ${displayName} should be visible`).toBeGreaterThan(-1);
        await this.waitForSecond(3); // TODO: refactor to wait api completed or table rendered
        const data = await this.getTableData(order, haveVisibleRow);

        // Compare with data from stat
        const rawData = await this.page.request.get(tableApiUrl);
        const apiData = await rawData.json();
        const apiDataValues = getPropertyValues(apiData.data, propertyName, modifierNullToDash, true);
        console.log(apiDataValues);
        console.log(data);
        return { dataApi: apiDataValues, dataUI: data };
    }
}
