import * as React from "react";
import { useState } from 'react';
import { AppState } from "../store";
import { connect } from "react-redux";
import { levels } from "../game/levels";
import { Route, Link } from "react-router-dom";
import LevelPreview from "./LevelPreview"


const LevelItem = ({ level, idx, cb, active, unlocked }) => {
    return (
	<div style={{display:'flex', flexDirection:'row'}}>
	<div className="levelItem"
	onClick={unlocked ? cb : ()=>{} }
	style={{background:  active ? '#9bf': '#79d',
	filter: !unlocked ? 'grayscale(70%)': 'none'}}>
	<LevelPreview level={level} active={active} />
	<p style={{fontSize:'1.5em'}}>{idx + 1+": "+level.name}</p>
	</div>
	</div>
    )}

const LevelSelectScreen = ({saveState}) =>{
    const [activeIdx, setActiveIdx] = useState(0);
    const unlockedState: Array<boolean> = [true, true];
    // const levelSaveState = store.get
    for(let i = 2; i < saveState.levels.length; ++i){
	let {done} = saveState.levels[i];
	unlockedState.push((!done  && saveState.levels[i-1].done) || done)
    }

    return (
	<div style={{padding:'1rem'}}>
	<div className="levelItems">
	<h1 className="levelSelectCaption">select level:</h1>
        {levels.map((level, idx) => {
	    let active = (idx === activeIdx);
	    // let locked = 
            return <LevelItem level={level}
	    idx={idx}
	    cb={()=>setActiveIdx(idx)}
	    active={active}
	    key={idx}
	    unlocked={unlockedState[idx]}
	    />
        })}
	<Link to={'/level/' + levels[activeIdx].name}>start</Link>
        </div>
	
    </div>)
}

const mapStateToProps = (state: AppState, ownprops?) => {

    return {
        ...ownprops,
	saveState: state.saveState
    }
}

const mapDispatchToProps = dispatch => {
    return {
        // openModal: () => dispatch({ type: OPEN_MODAL })
      }
}


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