import { ListGroup, ListGroupItem, Button, Collapse, UncontrolledCollapse } from "reactstrap";
import React, { FunctionComponent, Component } from "react";

const AllRules:FunctionComponent<any> = ({ allRules, rules, rawRules, changeTslintState }) => {

  if(!allRules) {
    return null;
  }
  return (
    <ListGroup>
      {
       allRules.map((allRule: any, index: number) => {
         if(!allRule) {
           return null;
         }
         let availableButton = <div />;
         if(rawRules[allRule.name] !==  undefined){
           availableButton = (
            <Button
              onClick={ () => changeTslintState(allRule.name, !rawRules[allRule.name], index) }
              color={ rawRules[allRule.name] ? 'success' : 'danger' }
              className="mx-2">
                { rawRules[allRule.name] ? 'On' : 'Off' }
            </Button>
           )
         }
        //  if(rawRules[allRule.name])
         return (
            <ListGroupItem className="list-group-item" index={ index }>
              <div className="d-flex justify-content-between py-2">
                <b>{ allRule && allRule.name } </b>
                <span>
                  <a href={ allRule && allRule.url }>
                    <Button color="info" className="mx-2">Info</Button>
                  </a>
                  <Button color="primary" id={ `toggler${ allRule.name }`}>Show details</Button>
                  { availableButton }
                </span>
              </div>
              <UncontrolledCollapse toggler={ `#toggler${ allRule.name }`}>
                <p>{ allRule.description }</p>
              </UncontrolledCollapse >
            </ListGroupItem>
          )
        })
      }
    </ListGroup>
  )
}

export default AllRules;