/*
 * Copyright (c) 2023 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

import { CardPage } from "../../support/card.po";

describe('Card in the Layout', () => {
    let page: CardPage;
    before(() => {
      page = new CardPage();
      page.navigateTo();
    });
  
    beforeEach(() => {
      cy.viewport(1920, 1200);
    });

    describe('Example Card', () => {
        it('should be visible and has correct styling', () => {
            page.getExampleCard().should('exist');
            page.getExampleCard().should('be.visible');
            // hex code $boschGray95 (#eff1f2) is rgb(239, 241, 242)
            page.getExampleCard().should('have.css', 'background-color', 'rgb(239, 241, 242)');
        });
    });

    describe('Card with selectable border color', () => {
        it('should have no border color as default', () => {
            page.getSelectableColorCard().should('have.class', 'mat-card-border');
        });

        it('should select correct border colors', () => {
            page.getSelectableColorCardRadioButtons("blue").click();
            page.getSelectableColorCard().should('have.class', 'mat-card-border-blue');
            page.getSelectableColorCard().should('have.css', 'border-top', '6px solid rgb(0, 123, 192)');
            page.getSelectableColorCardRadioButtons("green").click();
            page.getSelectableColorCard().should('have.class', 'mat-card-border-green');
            page.getSelectableColorCard().should('have.css', 'border-top', '6px solid rgb(0, 136, 74)');
            page.getSelectableColorCardRadioButtons("yellow").click();
            page.getSelectableColorCard().should('have.class', 'mat-card-border-yellow');
            page.getSelectableColorCard().should('have.css', 'border-top', '6px solid rgb(255, 207, 0)');
            page.getSelectableColorCardRadioButtons("red").click();
            page.getSelectableColorCard().should('have.class', 'mat-card-border-red');
            page.getSelectableColorCard().should('have.css', 'border-top', '6px solid rgb(237, 0, 7)');
            page.getSelectableColorCardRadioButtons("neutral").click();
            page.getSelectableColorCard().should('have.class', 'mat-card-border-neutral');
            page.getSelectableColorCard().should('have.css', 'border-top', '6px solid rgb(125, 131, 137)');
        })
    });

    describe('Disabled card', () => {
        it('should have correct disabled styling', () => {
            page.getDisabledCard().should('have.class', 'mat-card-border');
            page.getDisabledCard().should('have.class', 'mat-card-disabled');
        })
        it('should have correct non disabled styling', () => {
            page.getDisabledCardSwitch().click();
            page.getDisabledCard().should('have.class', 'mat-card-border');
            page.getDisabledCard().should('not.have.class', 'mat-card-disabled');
            page.getDisabledCard().should('have.css', 'background-color', 'rgb(239, 241, 242)');
        })
        it('should have correct disabled border styling', () => {
            page.getDisabledCardSwitch().click();
            page.getDisabledCardWithBorderSwitch().click();
            page.getDisabledCard().should('have.class', 'mat-card-disabled');
            page.getDisabledCard().should('have.class', 'mat-card-disabled-with-border');
            page.getDisabledCard().should('have.css', 'background-color', 'rgb(239, 241, 242)');
            page.getDisabledCard().should('have.css', 'border-top', '6px solid rgb(208, 212, 216)');
        })
    });

    describe('Card with selectable border color and disabled', () => {
        it('should have correct focus color', () => {
            page.getFocusCardSwitch().click();
            page.getFocusCard().should('have.attr', 'focus', 'focus');
            page.getFocusCard().should('have.css', 'background-color', 'rgb(209, 228, 255)');
        });
    });

    describe('Card with hover and pressed styling', () => {
        it('should have correct hover and pressed class', () => {
            page.getHoverCard().should('have.class', 'mat-card-hover-pressed');
        });

        it('should have colors without hover pressed styling', () => {
            page.getHoverCardSwitch().click();
            page.getHoverCard().should('not.have.class', 'mat-card-hover-pressed')
        });
    });

    describe('Horizontal Card', () => {
        it('should have correct horizontal class', () => {
            page.getSelectableColorCardHorizontalRadioButtons("none").click();
            page.getHorizontalCard().should('have.class', 'mat-card-horizontal-border');
        });

        it('should have correct border colors', () => {
            page.getSelectableColorCardHorizontalRadioButtons("blue").click();
            page.getHorizontalCard().should('have.class', 'mat-card-horizontal-border-blue');
            page.getHorizontalCard().should('have.css', 'border-left', '6px solid rgb(0, 123, 192)');
            page.getSelectableColorCardHorizontalRadioButtons("green").click();
            page.getHorizontalCard().should('have.class', 'mat-card-horizontal-border-green');
            page.getHorizontalCard().should('have.css', 'border-left', '6px solid rgb(0, 136, 74)');
            page.getSelectableColorCardHorizontalRadioButtons("yellow").click();
            page.getHorizontalCard().should('have.class', 'mat-card-horizontal-border-yellow');
            page.getHorizontalCard().should('have.css', 'border-left', '6px solid rgb(255, 207, 0)');
            page.getSelectableColorCardHorizontalRadioButtons("red").click();
            page.getHorizontalCard().should('have.class', 'mat-card-horizontal-border-red');
            page.getHorizontalCard().should('have.css', 'border-left', '6px solid rgb(237, 0, 7)');
            page.getSelectableColorCardHorizontalRadioButtons("neutral").click();
            page.getHorizontalCard().should('have.class', 'mat-card-horizontal-border-neutral');
            page.getHorizontalCard().should('have.css', 'border-left', '6px solid rgb(125, 131, 137)');
        });

        it('should have correct disabled styling', () => {
            page.getHorizontalSwitchDisabled().click();
            page.getSelectableColorCardHorizontalRadioButtons("none").click();
            page.getHorizontalCard().should('have.class', 'mat-card-horizontal-disabled');
        });

        it('should have correct disabled styling with disabled border', () => {
            page.getHorizontalSwitchDisabledWithBorder().click();
            page.getHorizontalCard().should('have.class', 'mat-card-horizontal-disabled-with-border');
        });

        it('should have correct focus styling', () => {
            page.getHorizontalSwitchDisabled().click();
            page.getHorizontalSwitchFocus().click();
            page.getHorizontalCard().should('have.attr', 'focus', 'focus');
            page.getHorizontalCard().should('have.css', 'background-color', 'rgb(209, 228, 255)');
            page.getHorizontalSwitchFocus().click();
        });

        it('should have correct hover and pressed class', () => {
            page.getHorizontalHoverCardSwitch().click();
            page.getHorizontalCard().should('have.class', 'mat-card-hover-pressed')
        });
    });

    describe('Disabled state shoudl overwrite focus state', () => {
        it('Horizontal Card should have disabled background color although the card is in focus state', () => {
            // horizonal card
            page.getHorizontalSwitchFocus().click();
            page.getHorizontalSwitchDisabled().click();
            page.getHorizontalCard().should('have.attr', 'focus', 'focus');
            page.getHorizontalCard().should('have.css', 'background-color', 'rgb(239, 241, 242)');
        });

        it('Card should have disabled background color although the card is in focus state', () => {
            // Vertical card
            // focus state is already enabled from a test before
            page.getFullExampleCardDisabledSwitch().click();
            page.getFocusCard().should('have.attr', 'focus', 'focus');
            page.getFocusCard().should('have.css', 'background-color', 'rgb(239, 241, 242)');
        });
    });
    
});