var startMove = 0;
var bottomSheet = Ti.UI.createView({
    height: 300,
    width: Ti.UI.FILL,
    backgroundColor: "red",
    bottom: -300,
    zIndex: 50
});

var overlay = Ti.UI.createView({
    backgroundColor: "#000",
    opacity: 0,
    height: Ti.UI.FILL,
    widdth: Ti.UI.FILL,
    zIndex: 30
});

var win = Ti.UI.createWindow({
    backgroundColor: "#fff"
});

var button = Ti.UI.createButton({
    title: "Open menu",
    backgroundColor: "#2A7E42",
    height: 40,
    width: 100,
    color: "#fff"
});

button.addEventListener('click', function(e) {
    showSheet();
});

overlay.addEventListener('click', function() {
    hideSheet();
})

function showSheet() {
    startMove = 0;
    win.add(overlay);
    overlay.animate({
        opacity: 0.4,
        duration: 300
    });
    bottomSheet.animate({
        bottom: -100,
        duration: 300
    })
};

function hideSheet() {
    overlay.animate({
        opacity: 0,
        duration: 300
    }, function() {
        win.remove(overlay);
    });

    bottomSheet.animate({
        bottom: -300,
        duration: 300
    });
}

bottomSheet.addEventListener('touchstart', (e) => {
    // only allow the top 30 pixels to trigger the move
    if (e.y < 30) {
        startMove = e.y;
    } else {
        startMove = 0;
    }
})

var position = -100;
bottomSheet.addEventListener('touchmove', (e) => {
    if (startMove === 0) return;
    var difference = e.y - startMove;
    position -= difference;
    bottomSheet.bottom = position;
    startMove = e.y;
    console.log(position);
});

bottomSheet.addEventListener('touchend', (e) => {
    if (bottomSheet.bottom > -150) {
        bottomSheet.animate({
            bottom: -100,
            duration: 300
        });
    } else {
        hideSheet();
    }
    startMove = 0;
    position = -100;
})

win.add(button);
win.add(bottomSheet);
win.open();