import RX = require('reactxp');

interface ContentPanelProps {
    onToggleDrawer: () => void;
}

const styles = {
    container: RX.Styles.createViewStyle({
        flex: 1,
        alignSelf: 'stretch',
        backgroundColor: 'red'
    }),
    drawerText: RX.Styles.createTextStyle({
        fontSize: 16,
        textAlign: 'center',
        marginTop: 12,
        color: 'black'
    }),
    scroll: RX.Styles.createScrollViewStyle({
        alignSelf: 'stretch',
        backgroundColor: 'red',
        flex: 1
    })
};

export default class ContentPanel extends RX.Component<ContentPanelProps, {}> {
    render() {
        return (
            <RX.View style={{ flex: 1, alignSelf: 'stretch' }}>
                <RX.View style={{ paddingTop: 20, backgroundColor: 'blue' }}>
                    <RX.Button
                        style={{ margin: 2, borderRadius: 10, backgroundColor: 'black', 
                            width: 20, height: 20, alignItems: 'center' }}
                                onPress={ this.props.onToggleDrawer }
                        >
                            <RX.Text style={{ color: 'white'}}>
                                H
                            </RX.Text>
                        </RX.Button>
                </RX.View>

                <RX.ScrollView style={ styles.scroll }>
                    <RX.View style={ styles.container }>
                        <RX.Text style={{ fontSize: 14 }}>1. This content panel has red background that should fill screen, but does not even with flex: 1 on container</RX.Text>
                        <RX.Text style={{ fontSize: 14 }}>2. This in turn affects the drawer height to not fill the entire available height</RX.Text>
                        <RX.Text style={{ fontSize: 14 }}>3. My animation does not seem to be smooth, especially on the first click</RX.Text>
                    </RX.View>
                </RX.ScrollView>
            </RX.View>
        );
    }
}