import React, { Fragment } from 'react'
import styles from './Styles.module.scss'
import Column from './Column/Controller'
import TopRow from './TopRow/Controller'
import SelectedEventBox from './EventBox/Controller'
import EventCell from './EventCell/Controller'
import cls from 'classnames'
import { Container, TabPane, TabContent, Nav, NavItem, NavLink } from 'mdbreact'

export default (data, togglePills, activeItemPills, list, list2) => (
  <Fragment>
    <div className={cls(styles.timeTable__container, 'row')}>
      <Container className="">
        <Nav pills color="secondary" className="nav-justified ">
          <NavItem>
            <NavLink to="#" className={cls({active: activeItemPills === '1'})} onClick={() => { togglePills('1') }}>
              Active
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink to="#" className={cls({active: activeItemPills === '2'})} onClick={() => { togglePills('2') }}>
              Link
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink to="#" className={cls({active: activeItemPills === '3'})} onClick={() => { togglePills('3') }}>
              Link
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink to="#" className={cls({active: activeItemPills === '4'})} onClick={() => { togglePills('4') }}>
              Help
            </NavLink>
          </NavItem>
        </Nav>
        <TabContent activeItem={activeItemPills}>
          <TabPane tabId="1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
          </TabPane>
          <TabPane tabId="2">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
          </TabPane>
          <TabPane tabId="3">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
          </TabPane>
          <TabPane tabId="4">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
          </TabPane>
        </TabContent>
      </Container>
    </div>