import React from 'react';
import Highlight from '../../helpers/highlight.js';
import { hash, hashSolution, hashExample } from './code/hash.js';

const each = `function each(collection, callback){
  //your code here
}`;

const map = `function map(collection, callback) {
  //your code here
}`;

export default () => (

  <div className="card deep-purple lighten-5">
    <div className="card-content">
      <h3>Level 7 - Hash Table and Extend</h3>
      <hr />
      <ul className="lesson-list">
        <li>
          <div className="card">
            <div className="card-content">
              <h4><b>Lesson 1 - Hash Table using Reduce</b></h4>
              <hr />
              <div className="">
                <h5><b>Objectives:</b></h5>
                <ul className="prompts">
                  <li><i className="fa fa-check green-text text-lighten-2"></i><span> Create function each</span></li>
                  <li><i className="fa fa-check green-text text-lighten-2"></i><span> Create function each</span></li>
                  <li><i className="fa fa-check green-text text-lighten-2"></i><span> Create function each</span></li>
                </ul>
              </div>
              <div className="">
                <h5><b>Technical:</b></h5>
              </div>
              <ul className="prompts">
                <li><i className="fa fa-check green-text text-lighten-2"></i><span> Create function each</span></li>
                <li><i className="fa fa-check green-text text-lighten-2"></i><span> Each should accept collection and callback as parameters</span></li>
                <li><i className="fa fa-check green-text text-lighten-2"></i><span> Each should work on arrays and objects</span></li>
              </ul>
            </div>
            <div className="code">
              <h5><b>Boilerplate:</b></h5>
              <Highlight props={hash} />
            </div>
            <div className="code">
              <h5><b>Example:</b></h5>
              <Highlight props={hashExample} />
            </div>
            <div className="code">
              <h5><b>Solution:</b></h5>
              <Highlight props={hashSolution} />
            </div>
          </div>
        </li>

        <li>
          <div className="card">
            <div className="card-content">
              <h4><b>Lesson 2 - Extend using Reduce</b></h4>
              <hr />
              <div className="">
                <h5><b>Objectives:</b></h5>
                <ul className="prompts">
                  <li><i className="fa fa-check green-text text-lighten-2"></i><span> Create function each</span></li>
                  <li><i className="fa fa-check green-text text-lighten-2"></i><span> Create function each</span></li>
                  <li><i className="fa fa-check green-text text-lighten-2"></i><span> Create function each</span></li>
                </ul>
              </div>
              <div className="">
                <h5><b>Technical:</b></h5>
              </div>
              <ul className="prompts">
                <li><i className="fa fa-check green-text text-lighten-2"></i><span> Create function map</span></li>
                <li><i className="fa fa-check green-text text-lighten-2"></i><span> Map should apply callback to every item in the collection</span></li>
                <li><i className="fa fa-check green-text text-lighten-2"></i><span> Map should accept collection and callback as parameters</span></li>
                <li><i className="fa fa-check green-text text-lighten-2"></i><span> Map should work on arrays and objects</span></li>
                <li><i className="fa fa-check green-text text-lighten-2"></i><span> Map should return a new array</span></li>
              </ul>
            </div>
            <div className="code">
              <h5><b>Boilerplate:</b></h5>
              <Highlight props={map} />
            </div>
            <div className="code">
              <h5><b>Solution:</b></h5>
              <Highlight props={map} />
            </div>
            <div className="code">
              <h5><b>Helpers:</b></h5>
              <Highlight props={each} />
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
);

@@ -137,16 +137,90 @@
 ash.js';
+%0Aimport %7B extend, extendSolution, extendExample %7D from './code/extend.js';
 %0A%0Aconst 
@@ -3938,35 +3938,38 @@
 ighlight props=%7B
-map
+extend
 %7D /%3E%0A           
@@ -4028,32 +4028,31 @@
      %3Ch5%3E%3Cb%3E
-Solution
+Helpers
 :%3C/b%3E%3C/h5%3E%0A 
@@ -4082,19 +4082,29 @@
  props=%7B
-map
+extendExample
 %7D /%3E%0A   
@@ -4167,39 +4167,40 @@
          %3Ch5%3E%3Cb%3E
-Helpers
+Solution
 :%3C/b%3E%3C/h5%3E%0A     
@@ -4227,19 +4227,29 @@
 props=%7Be
-ach
+xtendSolution
 %7D /%3E%0A   

add extend to page