// @flow
import * as React from 'react';
import {
	Button,
	Navbar,
	NavbarBrand,
	Nav,
	NavItem,
	NavLink,
} from 'reactstrap';

import {
	Route,
	Link,
	NavLink as RLink,
} from 'react-router-dom';

import { connect } from 'react-redux';

import * as Selectors from '@store/selectors';
import { clearUnsaved } from '@store/actions';

import { BEAT_ENTITIES, pluralize } from '@helpers/beat';
import { genModuleApiFuncs } from '@helpers/api';
import type { BeatEntity, BeatSettings } from '@helpers/beat';

import Settings from './Settings.jsx';

type Props = {
	database: BeatEntity[],
	library: BeatEntity[],
	dataformat: BeatEntity[],
	algorithm: BeatEntity[],
	toolchain: BeatEntity[],
	experiment: BeatEntity[],
	plotter: BeatEntity[],
	plotterparameter: BeatEntity[],
	settings: BeatSettings,
	unsavedChanges: boolean,
	clearUnsaved: () => any,
};

type State = {
	settingsOpen: boolean,
	isSaving: boolean,
};

const saveAll = async (allLists: Props) => {
	await Promise.all(
		BEAT_ENTITIES
		//.filter(e => Array.isArray(allLists[e]))
		.map(e => {
			const put = genModuleApiFuncs(e).put;
			return put(allLists[e]);
		})
	);
};

export class MainNav extends React.Component<Props, State> {
	constructor(props: Props) {
		super(props);
	}

	state = {
		settingsOpen: false,
		isSaving: false,
	}

	toggle = () => {
		this.setState({
			settingsOpen: !this.state.settingsOpen
		});
	}

	saveAllData = async () => {
		try {
			this.setState({
				isSaving: true
			});
			const res = await saveAll(this.props);
			this.setState({
				isSaving: false
			});
			this.props.clearUnsaved();
		} catch (e) {

		}
	}

	render() {
		return (
			<Navbar color="faded" light expand>
				<NavbarBrand href="/#/">beat.editor</NavbarBrand>
				<Nav className="mr-auto" navbar>
					{
						BEAT_ENTITIES
						.map((e, i) => {
							return (
								<NavItem key={i}>
									<NavLink tag={RLink} to={`/${ (e: any) }`}>{ pluralize(e) }</NavLink>
								</NavItem>
							);
						})
					}
				</Nav>
				<Nav className="ml-auto" navbar>
					{
						// right now we have no settings so there's no need to offer the user this modal
						/*
						<NavItem className='mr-1'>
							<Button outline onClick={this.toggle}>Settings</Button>
							<Settings
								isOpen={this.state.settingsOpen}
								toggle={this.toggle}
							/>
						</NavItem>
						*/
					}
					{
						// Dont need a 'save all' button anymore
						/*
					<NavItem>
						<Button outline color={this.props.unsavedChanges ? 'primary' : 'secondary'}
							disabled={this.state.isSaving}
							onClick={this.saveAllData}
							title={this.props.unsavedChanges ? 'There may be unsaved changes on the web app. Click to save changes.' : 'There are no changes detected.'}
						>
							Save All
						</Button>
					</NavItem>
						*/
					}
				</Nav>
			</Navbar>
		);
	}
}

const mapStateToProps = state => ({
	database: Selectors.databaseGet(state),
	library: Selectors.libraryGet(state),
	dataformat: Selectors.dataformatGet(state),
	algorithm: Selectors.algorithmGet(state),
	toolchain: Selectors.toolchainGet(state),
	experiment: Selectors.experimentGet(state),
	plotter: Selectors.plotterGet(state),
	plotterparameter: Selectors.plotterparameterGet(state),
	settings: Selectors.settingsGet(state),
	unsavedChanges: Selectors.unsavedGet(state),
});

const mapDispatchToProps = (dispatch, ownProps) => ({
	clearUnsaved: () => dispatch(clearUnsaved()),
});

export default connect(mapStateToProps, mapDispatchToProps)(MainNav);
