{"size": 2476, "ext": "js", "max_stars_repo_path": "BallSort/src/screens/Home.js", "max_stars_repo_name": "mineshpatel1/cerebral-cereal", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "BallSort/src/screens/Home.js", "max_issues_repo_name": "mineshpatel1/cerebral-cereal", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "BallSort/src/screens/Home.js", "max_forks_repo_name": "mineshpatel1/cerebral-cereal", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.2087912088, "max_line_length": 106, "alphanum_fraction": 0.5739095315}
import React from 'react';
import { connect } from 'react-redux';
import { Dimensions, View } from 'react-native';

import {
  Component, Container, DrawerMenu, Header, HorizontalMenu, Text,
  Layout, Utils,
} from 'cerebral-cereal-common';
import { levels } from '../data';
import Levels from './pages/Levels';

const maxWidth = Dimensions.get('window').width;
const pageSize = 40;

export class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showDrawer: false,
    };
  }

  getProgressPage = () => {
    const progress = this.props.progress;
    if (progress == 0) return 0;
    if (progress == levels.length) return Math.ceil(levels.length / pageSize) - 1;
    return Math.ceil((progress + 1) / pageSize) - 1;
  }

  render() {
    const { Colours } = this.getTheme();
    const { props, state } = this;

    const menuItems = [
      {label: 'Help', icon: 'question', route: 'Help'},
      {label: 'Settings', icon: 'cog', route: 'Settings'},
      {label: 'Acknowledgements', icon: 'users', route: 'Acknowledgements'},
    ];

    const screens = Utils.chunks(levels, pageSize).map(page => {
      return {
        element: (
          <Levels
            navigation={props.navigation}
            page={page}
          />
        )
      }
    });

    return (
      <DrawerMenu
        title={"Info & Settings"}
        menu={menuItems}
        isOpen={state.showDrawer}
        navigation={props.navigation}
        onRequestClose={() => this.setState({showDrawer: false})}
      >
        <Header
          title={'Ball Sort Puzzle'}
          link={{
            icon: 'bars', label: 'Settings Menu',
            onPress: () => this.setState({showDrawer: true})
          }}
        />
        <Container colour={Colours.background}>
          <View style={[Layout.center, Layout.pb1, {borderBottomWidth: 3, borderColor: Colours.primary}]}>
            <Text display>Levels</Text>
          </View>
          <HorizontalMenu
            tabs={Utils.range(levels.length, 1).map(i => Utils.toRomanNumeral(i))}
            screens={screens}
            width={maxWidth}
            style={{backgroundColor: Colours.background}}
            ref={ref => this.pages = ref}
            defaultSelected={this.getProgressPage()}
          />
        </Container>
      </DrawerMenu>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    progress: state.progress,
  }
};

export default connect(mapStateToProps)(Home);
