import Component from '../component';
import './ModalSidebar.css';

const SHOW_WINDOW_CLASS = 'ModalSidebar__window_show';
const HIDE_WINDOW_CLASS = 'ModalSidebar__window_hide';
const SHOW_SHADOW_CLASS = 'ModalSidebar__shadow_show';
const HIDE_SHADOW_CLASS = 'ModalSidebar__shadow_hide';

class ModalSidebar extends Component {
    constructor ({
        content,
        disabledShadowClose,
    } = {}) {
        const parentNode = document.body;
        super('#modal-sidebar', parentNode);

        this.shadow = this.createElement({
            tagName: 'div',
            parentNode,
            options: {
                className: 'ModalSidebar__shadow',
            },
        });

        this.crossButton = this.mainNode.querySelector('.ModalSidebar__close');

        this.window = this.mainNode.querySelector('.ModalSidebar__window');

        this.window.appendChild(content);

        if (!disabledShadowClose) {
            this.addEventListener(this.mainNode, 'click', (event) => {
                if (event.target === this.mainNode) {
                    this.hide();
                }
            });
        }

        this.addEventListener(this.crossButton, 'click', this.hide);
    }

    isOpen = () => {
        return this.mainNode.classList.contains(SHOW_WINDOW_CLASS);
    }

    toggle = () => {
        if (this.isOpen()) {
            this.hide();
        } else {
            this.show();
        }
    }

    show = () => {
        this.mainNode.classList.add(SHOW_WINDOW_CLASS);
        this.shadow.classList.add(SHOW_SHADOW_CLASS);

        this.mainNode.classList.remove(HIDE_WINDOW_CLASS);
        this.shadow.classList.remove(HIDE_SHADOW_CLASS);
    }

    hide = () => {
        this.mainNode.classList.remove(SHOW_WINDOW_CLASS);
        this.shadow.classList.remove(SHOW_SHADOW_CLASS);

        this.mainNode.classList.add(HIDE_WINDOW_CLASS);
        this.shadow.classList.add(HIDE_SHADOW_CLASS);
    }
}

export default ModalSidebar;