Template.flexboxLayout.onCreated(() => {
    const instance = Template.instance();
    instance.state = instance.data.state;
    instance.timepointViewType = new ReactiveVar();
});

let resizeTimeout;
Template.flexboxLayout.onRendered(() => {
    const instance = Template.instance();

    instance.autorun(() => {
        Meteor.clearTimeout(resizeTimeout);

        // Trigger a resize any time the layout state changes
        instance.state.get('leftSidebar');
        instance.state.get('rightSidebar');

        resizeTimeout = Meteor.setTimeout(() => {
            handleResize();
        }, 300);
    });
});

Template.flexboxLayout.helpers({
    timepointViewType() {
        return Template.instance().timepointViewType;
    },

    sidebarButtonGroupData() {
        const instance = Template.instance();
        return {
            value: instance.timepointViewType,
            options: [{
                value: 'key',
                text: 'Key Timepoints'
            }, {
                value: 'all',
                text: 'All Timepoints'
            }]
        };
    },

    leftSidebarOpen() {
        const instance = Template.instance();
        return instance.state.get('leftSidebar');
    },

    lesionSidebarOpen() {
        return Template.instance().state.get('rightSidebar') === 'lesions';
    },

    additionalMeasurementsSidebarOpen() {
        return Template.instance().state.get('rightSidebar') === 'additional';
    },

    rightSidebarOpen() {
        return Template.instance().state.get('rightSidebar') !== null;
    }
});