import React, { Component } from 'react';
import { Table } from 'reactstrap';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { CreateSchool } from './CreateSchool';
import { SchoolDetails } from './SchoolDetails';

const schools = [
  {
    "id": "5a95a030fd27c94ad3a1d2e8",
    "schoolName": "Ludak",
    "schoolContactPerson": "Mcgee Pratt",
    "schoolEmailAddress": "mcgeepratt@ludak.com"
  },
  {
    "id": "5a95a030e61e18afddb86b5c",
    "schoolName": "Bicol",
    "schoolContactPerson": "Holland Mason",
    "schoolEmailAddress": "hollandmason@bicol.com"
  },
  {
    "id": "5a95a030831c5b66f761f919",
    "schoolName": "Quotezart",
    "schoolContactPerson": "Mcguire Vazquez",
    "schoolEmailAddress": "mcguirevazquez@quotezart.com"
  },
  {
    "id": "5a95a030a426327c89769af7",
    "schoolName": "Interfind",
    "schoolContactPerson": "Calderon Fleming",
    "schoolEmailAddress": "calderonfleming@interfind.com"
  },
  {
    "id": "5a95a0308a36712a23344ffe",
    "schoolName": "Bleeko",
    "schoolContactPerson": "Dana Albert",
    "schoolEmailAddress": "danaalbert@bleeko.com"
  },
  {
    "id": "5a95a030bef97b3f3bb90eb6",
    "schoolName": "Earthwax",
    "schoolContactPerson": "Morgan Harper",
    "schoolEmailAddress": "morganharper@earthwax.com"
  },
  {
    "id": "5a95a0300172c45adcf12b62",
    "schoolName": "Macronaut",
    "schoolContactPerson": "Marisol Pierce",
    "schoolEmailAddress": "marisolpierce@macronaut.com"
  },
  {
    "id": "5a95a0306bb5535cd62ae345",
    "schoolName": "Orbiflex",
    "schoolContactPerson": "Singleton Weaver",
    "schoolEmailAddress": "singletonweaver@orbiflex.com"
  },
  {
    "id": "5a95a030a195042e69be80fc",
    "schoolName": "Glasstep",
    "schoolContactPerson": "William Deleon",
    "schoolEmailAddress": "williamdeleon@glasstep.com"
  },
  {
    "id": "5a95a0306c4de640e956f247",
    "schoolName": "Egypto",
    "schoolContactPerson": "Fernandez Pickett",
    "schoolEmailAddress": "fernandezpickett@egypto.com"
  },
  {
    "id": "5a95a03019decb8d1c61e67e",
    "schoolName": "Suretech",
    "schoolContactPerson": "Terrie Rutledge",
    "schoolEmailAddress": "terrierutledge@suretech.com"
  },
  {
    "id": "5a95a0302eb55095b78dea9b",
    "schoolName": "Lotron",
    "schoolContactPerson": "Herring Chandler",
    "schoolEmailAddress": "herringchandler@lotron.com"
  },
  {
    "id": "5a95a0308a49fe7f257fbb3f",
    "schoolName": "Freakin",
    "schoolContactPerson": "Warren Boyer",
    "schoolEmailAddress": "warrenboyer@freakin.com"
  },
  {
    "id": "5a95a030a5c8ddb5a786993e",
    "schoolName": "Comstruct",
    "schoolContactPerson": "Conner Blake",
    "schoolEmailAddress": "connerblake@comstruct.com"
  },
  {
    "id": "5a95a0307b2d398bf09e231e",
    "schoolName": "Zuvy",
    "schoolContactPerson": "Collins Alvarez",
    "schoolEmailAddress": "collinsalvarez@zuvy.com"
  },
  {
    "id": "5a95a030e3151cc158db525d",
    "schoolName": "Isologia",
    "schoolContactPerson": "Bridget Parker",
    "schoolEmailAddress": "bridgetparker@isologia.com"
  },
  {
    "id": "5a95a030864c61f96d9e0276",
    "schoolName": "Zentime",
    "schoolContactPerson": "Brandie Ramos",
    "schoolEmailAddress": "brandieramos@zentime.com"
  },
  {
    "id": "5a95a03055cc3300fc050893",
    "schoolName": "Viocular",
    "schoolContactPerson": "Emilia Beck",
    "schoolEmailAddress": "emiliabeck@viocular.com"
  },
  {
    "id": "5a95a0301589c98302e1ed69",
    "schoolName": "Insurity",
    "schoolContactPerson": "Shannon Cantrell",
    "schoolEmailAddress": "shannoncantrell@insurity.com"
  },
  {
    "id": "5a95a03029eb66ba3b5c0c12",
    "schoolName": "Multiflex",
    "schoolContactPerson": "Barnes Huber",
    "schoolEmailAddress": "barneshuber@multiflex.com"
  },
  {
    "id": "5a95a030692186269fd9dc3d",
    "schoolName": "Pathways",
    "schoolContactPerson": "Alta Davenport",
    "schoolEmailAddress": "altadavenport@pathways.com"
  },
  {
    "id": "5a95a0305293dd189752534a",
    "schoolName": "Boilicon",
    "schoolContactPerson": "Imogene Raymond",
    "schoolEmailAddress": "imogeneraymond@boilicon.com"
  },
  {
    "id": "5a95a03029d6dba5ff3032b9",
    "schoolName": "Navir",
    "schoolContactPerson": "Eleanor Castaneda",
    "schoolEmailAddress": "eleanorcastaneda@navir.com"
  },
  {
    "id": "5a95a030c1934613bbe8e50b",
    "schoolName": "Zilch",
    "schoolContactPerson": "Georgette Gonzales",
    "schoolEmailAddress": "georgettegonzales@zilch.com"
  },
  {
    "id": "5a95a0308af7882bb0bc06f0",
    "schoolName": "Digitalus",
    "schoolContactPerson": "Shaw Thompson",
    "schoolEmailAddress": "shawthompson@digitalus.com"
  },
  {
    "id": "5a95a0309695fb9d1f46b00b",
    "schoolName": "Xinware",
    "schoolContactPerson": "Deloris Hawkins",
    "schoolEmailAddress": "delorishawkins@xinware.com"
  },
  {
    "id": "5a95a030549e48a11059a15a",
    "schoolName": "Apextri",
    "schoolContactPerson": "Ursula Randolph",
    "schoolEmailAddress": "ursularandolph@apextri.com"
  },
  {
    "id": "5a95a030a9f4cf99d2ed0a65",
    "schoolName": "Phormula",
    "schoolContactPerson": "Grant Herman",
    "schoolEmailAddress": "grantherman@phormula.com"
  },
  {
    "id": "5a95a0300cc7d7c28b48a32a",
    "schoolName": "Besto",
    "schoolContactPerson": "Shelby Ochoa",
    "schoolEmailAddress": "shelbyochoa@besto.com"
  },
  {
    "id": "5a95a030f9b315e777c21d6f",
    "schoolName": "Darwinium",
    "schoolContactPerson": "Noemi Brock",
    "schoolEmailAddress": "noemibrock@darwinium.com"
  },
  {
    "id": "5a95a030d97bd46cbce70d58",
    "schoolName": "Mitroc",
    "schoolContactPerson": "Ellison Velazquez",
    "schoolEmailAddress": "ellisonvelazquez@mitroc.com"
  },
  {
    "id": "5a95a030f0d6d4144ccdc1b9",
    "schoolName": "Portica",
    "schoolContactPerson": "Davis Sargent",
    "schoolEmailAddress": "davissargent@portica.com"
  },
  {
    "id": "5a95a030bbcc952671a81ffc",
    "schoolName": "Quailcom",
    "schoolContactPerson": "Robbins Cruz",
    "schoolEmailAddress": "robbinscruz@quailcom.com"
  }
]
// const schools = [
//   {
//     id: 1,
//     schoolName: 'De Golfbreker',
//     schoolContactPerson: 'Jan de Hoop',
//     schoolEmailAddress: 'info@degolfbreker.nl'
//   },
//   {
//     id: 2,
//     schoolName: 'Het Baken',
//     schoolContactPerson: 'Peter Timofeeff',
//     schoolEmailAddress: 'info@hetbaken.nl'
//   },
//   {
//     id: 3,
//     schoolName: 'De Gordelroos',
//     schoolContactPerson: 'Helena Huppelkut',
//     schoolEmailAddress: 'info@gordelroos.nl'
//   }
// ];

const listSchools = schools.map((school) =>
    <tr>
      <td scope="row">{school.id}</td>
      <td key={school.id}><Link to={`scholen/${school.id}`}>{school.schoolName}</Link></td>
      <td>{school.schoolContactPerson}</td>
      <td>{school.schoolEmailAddress}</td>
    </tr>
);

const Detail = ({ match }) => (
  <div>
    {match.params.schoolId}
  </div>
)
const SchoolDetail = ({match}) => (
  <div>
    <Route path={`${match.path}/:schoolId`} component={SchoolDetails}/>
  </div>
);
export class Schools extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-lg-12 d-flex justify-content-start">
              <Link to="/scholen/aanmaken">
                <Button color="primary" onClick={this.toggle}>School aanmaken</Button>
              </Link>
          </div>
        </div>
        <div className="row">
          <div className="col-lg-12">
            <Table size="sm" hover striped>
              <thead>
                <tr>
                  <th>ID</th>
                  <th>School</th>
                  <th>Hoofdgebruiker</th>
                  <th>E-mailadres</th>
                </tr>
              </thead>
              <tbody>
                {listSchools}
                {SchoolDetail}
              </tbody>
            </Table>
          </div>
        </div>
      </div>
    )
  }
}