import Component  from '../component.js'
import { elementAttributeContains } from '../../core/utils.js'

export default class MatCheckbox extends Component {
    constructor(parent) {
        let selector = 'mat-checkbox';
        super(parent, selector);
    }
    // https://github.com/angular/components/blob/ad248652e7da31398176fe11878b59805e440b5a/src/material/checkbox/checkbox.html
    // https://github.com/angular/components/blob/10.0.x/src/material/checkbox/checkbox.html

    get layout() {
        return this.currentPath + '//label[contains(@class,"mat-checkbox-layout")]';
    }

    async isCheckboxChecked() {
        return await elementAttributeContains(this.currentPath, 'class', 'mat-checkbox-checked');
    }    

    get label() {
        return this.layout + '//span[contains(@class,"mat-checkbox-label")]';
    }

    get innerContainer() {
        return this.layout + '//*[contains(@class,"mat-checkbox-inner-container")]';
    }

    async hasNoSideMargin() {
        return await elementAttributeContains(this.currentPath, 'class', 'mat-checkbox-inner-container-no-side-margin');
    }

    get input() {
        return this.innerContainer + '//input[contains(@class,"mat-checkbox-input")]';
    }

    get ripple() {
        return this.innerContainer + '//span[contains(@class,"mat-checkbox-ripple")]';
    }

    get rippleElement() {
        return this.ripple + '//span[contains(@class,"mat-ripple-element")]';
    }

    get frame() {
        return this.innerContainer + '//span[contains(@class,"mat-checkbox-frame")]';
    }

    get background() {
        return this.innerContainer + '//span[contains(@class,"mat-checkbox-background")]';
    }

    get mixedmark(){
        return this.background + '//span[contains(@class,"mat-checkbox-mixedmark")]';
    }
}