// ! TODO: Удалить, необходим для примера работы с компонентами
import Component from '../component';

import './TestModal.css';

const MAIN = 'TestModal';
const CN = {
    SHADOW: `${MAIN}__shadow`,
    WINDOW: `${MAIN}__window`,
    HIDE_MODAL: `${MAIN}_hide`,
};

class TestModal extends Component {
    constructor() {
        super('#test-modal', document.body);

        this.shadow = this.mainNode.querySelector(`.${CN.SHADOW}`);
        this.window = this.mainNode.querySelector(`.${CN.WINDOW}`);

        this.addEventListener(this.shadow, 'click', (evt) => {
            if (evt.target === this.shadow) {
                this.hide();
            }
        });

        this.hide();
    }

    show = () => {
        this.mainNode.classList.remove(CN.HIDE_MODAL);
    }

    hide = () => {
        this.mainNode.classList.add(CN.HIDE_MODAL);
    }
}

export default TestModal;