const Record = function(tp) {

    const hot = {}; 

    const addRecordButton = (layer, propTitle, isActive) => {
        const panel = tp.getPanel();
        const panelPropTitle = tp.getPanelPropTitle(propTitle);
        if (panelPropTitle !== null) {
            const container = tp.getPanelPropContainer(panelPropTitle);
            if (container === null) {
                console.log("Record::addRecordButton",
                    `impossible! cannot find panelPropContainer for ${propTitle}`);
            } else if (container.querySelector('.recordButton') !== null) {
                console.log("Record::addRecordButton",
                    `already added an record button for ${propTitle}`);
            } else {
                const button = document.createElement('div');
                button.classList.add('recordButton');
                button.classList.add(`recordButton${propTitle}`);
                button.innerHTML = `<img src="/web/assets/record.svg" alt="record" />`;
                container.append(button);
                button.addEventListener('click', () => {
                    if (!hot.hasOwnProperty(layer.id())) {
                        hot[layer.id()] = {};
                    }
                    if (!hot[layer.id()].hasOwnProperty(propTitle)) {
                        hot[layer.id()][propTitle] = {};
                        button.classList.add('active');
                    } else {
                        delete hot[layer.id()][propTitle];
                        if (Object.keys(hot[layer.id()]).length === 0) {
                            delete hot[layer.id()];
                        }
                        button.classList.remove('active');
                    }
                });
            }
        } else {
            console.log("Record::addRecordButton",
                `cannot find panelPropTitle for ${propTitle}`);
        }
    };

    // public
    this.addRecordButton = addRecordButton;
};

export {
    Record
}