import React from "react"
import Presentation from "./Presentation"
import Icon from 'material-ui/Icon'
import IconButton from 'material-ui/IconButton'
import Grid from 'material-ui/Grid'
import Typography from 'material-ui/Typography'
import { colors } from "../themes/coinium"
require("../themes/coinium/index.css")

const FOOTER_WIDTH = 60
const MODES = {
  PRESENTATION: 0,
  HELP: 1
}

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mode: MODES.PRESENTATION
    };
  }

  goToSlide(slideName) {
    this.setState({mode: MODES.PRESENTATION}, () => {
      location.hash = `/${slideName}`
    })
  }

  renderHelp() {
    const style = {
      height: '100%',
      backgroundColor: colors.primary
    }
    const creditsStyle = {
      opacity: 0.8
    }

    return (
      <Grid container direction="column" justify="center" align="center" style={style}>
        <Typography type="caption" style={creditsStyle}>
          Copyright 2017 Coinium, Inc
          <hr />
          Contact us: <a href="mailto:support@coinium.com">support@coinium.com</a>
          <hr />
          {"Some icons based on the work of "}
          <a href="http://www.freepik.com" title="Freepik">Freepik</a>
          {" from "}
          <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
          {" are licensed by "}
          <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
        </Typography>
      </Grid>
    )
  }

  renderCurrentPage() 


  render() {
    const mainStyle = {
      position: 'fixed',
      top: 0,
      right: FOOTER_WIDTH,
      bottom: 0,
      left: 0,
      boxShadow: '2px 0px 4px rgba(0,0,0,0.4)',
      zIndex: 2,
      overflow: 'hidden'
    }

    const navStyle = {
      background: colors.secondary,
      position: 'fixed',
      top: 0,
      right: 0,
      bottom: 0,
      left: 'auto',
      width: FOOTER_WIDTH,
      zIndex: 1
    }

    const onHelpClick = () => {
      const mode = this.state.mode == MODES.HELP
        ? MODES.PRESENTATION
        : MODES.HELP
      this.setState({mode})
    }

    return (
      <Grid container className="App">
        <Grid item style={mainStyle}>
          {this.renderCurrentPage()}
        </Grid>

        <Grid item container direction="column"
              justify="space-between" align="center" spacing={0}
              style={navStyle}>
          <Grid>
            <IconButton onClick={this.goToSlide.bind(this, "home")}>
              <Icon color="contrast">home</Icon>
            </IconButton>
            <IconButton onClick={this.goToSlide.bind(this, "problem")}>
              <Icon color="contrast">info_outline</Icon>
            </IconButton>
            <IconButton onClick={this.goToSlide.bind(this, "team")}>
              <Icon color="contrast">people</Icon>
            </IconButton>
            <IconButton onClick={this.goToSlide.bind(this, "mobile")}>
              <Icon color="contrast">phone_iphone</Icon>
            </IconButton>
            <IconButton onClick={this.goToSlide.bind(this, "signup")}>
              <Icon color="contrast">insert_drive_file</Icon>
            </IconButton>
          </Grid>

          <Grid>
            <IconButton onClick={onHelpClick}>
              <Icon color="contrast">help_outline</Icon>
            </IconButton>
          </Grid>
        </Grid>
      </Grid>
    );
  }
}
{
    switch (this.state.mode) {
      case MODES.PRESENTATION:
        return <Presentation />
      case MODES.HELP:
        return this.renderHelp()
      default:
        return (
          <Typography>Please reload</Typography>
        )
    }
  }