import React from 'react'
import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap'
import { ICategoryModel } from '../../../models'

const Search = () => {
  return <Card className="mb-4">
    <CardHeader>Search</CardHeader>
    <CardBody>
      <div className="input-group">
        <input className="form-control" type="text" placeholder="Enter search term..." aria-label="Enter search term..." aria-describedby="button-search" />
        <button className="btn btn-primary" id="button-search" type="button">Go!</button>
      </div>
    </CardBody>
  </Card>
}

export interface ICategories {
  categories?: ICategoryModel []
}

const Categories = (props: ICategories) => {
  const { categories } = props

  if(!categories) {
    return <></>
  }

  const middleIndex = Math.ceil(categories.length / 2)

  const firstHalf = categories.splice(0, middleIndex) 
  const secondHalf = categories.splice(-middleIndex)

  return  <Card className="mb-4">
    <CardHeader>Categories</CardHeader>
    <CardBody>
      <Row>

        <Col sm="6">
          <ul className="list-unstyled mb-0">
            {firstHalf.map((item, index) => <li key={index}><a href="#!">{item.text}</a></li>)}
          </ul>
        </Col>
        <Col sm="6">
          <ul className="list-unstyled mb-0">
            {secondHalf.map((item, index) => <li key={index}><a href="#!">{item.text}</a></li>)}
          </ul>
        </Col>
      </Row>
    </CardBody>
  </Card>
}

const Empty = () => {
  return <Card className="mb-4">
    <CardHeader>Side Widget</CardHeader>
    <CardBody>
            You can put anything you want inside of these side widgets. They are easy to use, and feature the Bootstrap 5 card component!
    </CardBody>
  </Card>
}

export {
  Search,
  Categories,
  Empty
}