import React, { Component } from 'react'
import { View, TouchableOpacity } from 'react-native'
import { observable, transaction, computed, action } from 'mobx'
import { observer } from 'mobx-react/native'

import Icon from 'react-native-vector-icons/FontAwesome'
import Drawer from 'react-native-drawer'

import { PureComponent } from './Component.js'
import { T } from './AppText.js'

@observer
export class SideMenu extends PureComponent {
    /* properties:
        content: Component or [Component]
    */
    render = () => {
        //Parallax Effect (slack style)
        const open = drawerStore.open
        const content = open ? this.props.content : undefined
        return <Drawer
                    ref={ref => { this.drawer = ref}}
                    open={drawerStore.open}
                    onOpen={drawerStore.setOpen}
                    onClose={drawerStore.setClosed}
                    type="static"
                    content={content}
                    openDrawerOffset={0.25}
                    panCloseMask={0.25}
                    styles={drawerStyles}
                    disabled={drawerStore.disabled}
                    tweenHandler={Drawer.tweenPresets.parallax}
                    tapToClose={true}
                    /*elevation={2}*/
                    >
                {this.props.children}
            </Drawer>
    }
}

@observer
export class MenuIcon extends PureComponent {
    render = () => {
        return <TouchableOpacity onPress={drawerStore.toggleOpenClose}>
            <Icon name="bars" size={30} color="#000" />
        </TouchableOpacity>
    }
}

class DrawerStore {
    @observable open = false
    @observable disabled = false

    @action disable = () => this.disabled = true
    @action enable = () => this.disabled = false

    @action setOpen = () => this.open = true
    @action setClosed = () => this.open = false

    toggleOpenClose = () => {
        this.open = !this.open
    }
}

export const drawerStore = new DrawerStore()


const drawerStyles = {
    drawer: {
        shadowColor: '#000000',
        shadowOpacity: 0.8,
        // shadowRadius: 3,
    },
    main: {
        // paddingLeft: 3,
    },
}

@@ -65,16 +65,26 @@
 eOpacity
+, Platform
  %7D from 
@@ -1080,16 +1080,28 @@
 styles=%7B
+drawerStore.
 drawerSt
@@ -1103,17 +1103,16 @@
 werStyle
-s
 %7D%0A      
@@ -1968,24 +1968,349 @@
 s.open%0A    %7D
+%0A%0A    @computed get drawerStyle() %7B%0A        var drawerStyle = %7B%7D%0A        if (this.open && !this.disabled) %7B%0A            drawerStyle = %7B%0A                shadowColor: '#000000',%0A                shadowOpacity: 0.8%0A                // shadowRadius: 3,%0A            %7D%0A        %7D%0A        return %7B drawer: drawerStyle, main: %7B%7D %7D%0A    %7D
 %0A%7D%0A%0Aexport c
@@ -2347,17 +2347,19 @@
 tore()%0A%0A
-%0A
+// 
 const dr
@@ -2371,35 +2371,58 @@
 tyle
-s
  =
- %7B%0A    drawer: %7B%0A
+%0A//     Platform.OS === 'android'%0A// 
        
+ ? %7B
  sha
@@ -2440,25 +2440,31 @@
 #000000'
-,
 %0A
+// 
        
+   ,
  shadowO
@@ -2474,26 +2474,27 @@
 ity: 0.8
-,
 %0A
+//
         
 // shado
@@ -2477,34 +2477,39 @@
 : 0.8%0A//        
-//
+   // ,
  shadowRadius: 3
@@ -2512,61 +2512,36 @@
 s: 3
-,
 %0A
+//  
     
-%7D,%0A
     
-main: %7B%0A        // paddingLeft: 3,%0A    %7D,%0A
+ %7D%0A//         : %7B
 %7D%0A

Remove shadow from side menu when closed (doesn't work well on iOS)