import React from 'react';
import {StyleSheet, View, Text , Button } from 'react-native';
import { Icon } from 'react-native-elements'
import {  TextInput } from 'react-native';
import BaseSystem from './System'

class Menu extends BaseSystem {
	constructor() {
		super();
		this.items = [];
	}
	addItem(item) {
		this.items.push(item);
		return this;
	}
	show() { this.visible = true; this.forceUpdate() }
	hide() { this.visible = false; this.forceUpdate() }
	toggle() { this.visible = !this.visible; this.forceUpdate() }
	render() {
		return this.visible ? <div style={{position:'relative', left: 0, top: 50}}
						onMouseLeave={() => this.hide()}>
			<View style={styles.menu}>
			{this.items.map((item) => {
				let {
					text,
					...rest
				} = item;
				return <View style={{cursor: 'pointer'}} {...rest}>
					<Text>{item.text}</Text>
				</View>
			})}
			</View>
		</div> : null;
	}
}

export default class MainBar extends BaseSystem {
	constructor(CS){
		super();
		this.__save = null
		this.CoreSystem = CS;
		this.Menu = new Menu();
		this.Menu.addItem({
			text: "New page",
			onClick: () => this.createPage()
		}).addItem({
			text: "Save",
			onClick: () => this.save()
		}).addItem({
			text: "Export",
			onClick: () => this.export()
		}).onUpdate(() => this.forceUpdate());
	}

	export() {
		let json = JSON.stringify(this.CoreSystem.export());
		console.log(json);
	}

	onSave(fn){
		this.__save = fn;
	}

	save(){
		this.__save && this.__save();
	}

	triggerSave(){
		this.save();
	}

	createPage() {
		// think!
		// Create a new page on CoreSystem
		// switch to it as active view
		// Decide how page switching works
		
	}

	none(){
		
	}
	toggleMenu() {
		this.Menu.toggle();
	}
	showMenu() {
		this.Menu.show();
	}
	hideMenu() {
		this.Menu.hide();
	}
	render(){
		return (
		<View style={styles.container}>
			<Button 
				color="#f1f1f1"
				title={<Icon  name='menu'
  					color="#606060"
  				/>}
  				onPress={(e) => this.toggleMenu()}
  			/>
  			<Button 
				color="#f1f1f1"
				title={<Icon  name='home'
  					color="#606060"
  				/>}
  			/>
			<Text style={{height:30,width:80,fontSize:11,marginTop:6}}>
			<Button
				onPress={(e) => this.triggerSave()} 
				title="Save"
  				color="#606060" 
  			/>
  			</Text>
  			<Text style={{height:30,width:80,fontSize:11,marginTop:6}}>
  			<Button
				onPress={(e) => this.export()} 
				title="Export"
  				color="#606060" 
  			/>
  			</Text>
  			{this.Menu.render()}
		</View>)
	}
}


const styles = StyleSheet.create({
	container:{
		flex:1,
		paddingRight:25,
		marginLeft:5,
		flexDirection:'row',

	},
	menu: {
		height:100,
		width: 200,
		backgroundColor: 'gray'
	}
})