import axios from 'axios';
import React, { Component } from 'react'
import { Col, Container, Row, Input } from 'reactstrap';
import { LOCALHOST } from './constants/api';
import TSRules from './components/tslint/Rules';
import TSModules from './components/tslint/Modules';
import AllRules from './components/tslint/AllRules';

export default class App extends Component {

  state = {
    allRules: [],
    modules: [],
    rawRules: [],
    rules: [],
  }

  componentDidMount() {
    axios.get(`${ LOCALHOST }/tslint`).then((res) => {
      this.setState({ rules: res.data.rules, modules: res.data.modules, allRules: res.data.allRules, rawRules: res.data.rawRules });
    });
  }

  changeTslintState = (name: string, value: string, index: number) => {
      axios.post(`${ LOCALHOST }/tslint`, { name, value }).then((res) => {
        this.setState((prevState: any) => {
          const newRules = prevState.rules
          newRules[index] = { ...newRules[index], name, value: !value }

          return { rules: newRules }
        })
      })
  }


  render() {
    return (
      <Container id="app" className="my-5">
      <Row>
        <Col md="6">
          <AllRules
            allRules={ this.state.allRules }
            rules={ this.state.rules }
            changeTslintState={ this.changeTslintState }
            rawRules={ this.state.rawRules }
          />
        </Col>
      </Row>
        <Row>
          <Col md="6">
            <Input placeholder="Add new rule"/>
            <TSRules rules={ this.state.rules } changeTslintState={ this.changeTslintState }/>
          </Col>
          <Col md="6">
            <TSModules modules={ this.state.modules } />
          </Col>
        </Row>
      </Container>
    )
  }
}