import React, { Component } from "react";
import "./App.css";
import axios from "axios";
import Button from "react-bootstrap/Button";
import DropdownButton from "react-bootstrap/DropdownButton";
import Dropdown from "react-bootstrap/Dropdown";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";

axios.defaults.withCredentials = true;

class App extends Component {
  constructor(props) {
    super();
    this.toggle = this.toggle.bind(this);
    this.select = this.select.bind(this);
    this.fetchData();
  }

  state = {
    test: [],
    from: 0,
    size: 20,
    namePrefix: "",
    sizeOfAll: 0,
    numberOfPages: 1,
    offset: 0,
    currentPage: 1,
    dropdownOpen: false,
    valueOfDropdown: "20"
  };

  componentDidMount() {
    this.fetchData();
  }

  nextPage = () => {
    const nextPageNumber = this.state.from + this.state.size;
    //rozwiazanie problemu asynchronicznosci przez callback
    this.setState(
      {
        from: nextPageNumber
      },
      () => {
        this.fetchData();
      }
    );
  };

  lastPage = () => {
    const lastPageNumber =
      this.state.numberOfPages * this.state.size - this.state.size;
    //rozwiazanie problemu asynchronicznosci przez callback
    this.setState(
      {
        from: lastPageNumber
      },
      () => {
        this.fetchData();
      }
    );
  };
  firstPage = () => {
    const firstPageNumber = 0;
    //rozwiazanie problemu asynchronicznosci przez callback
    this.setState(
      {
        from: firstPageNumber
      },
      () => {
        this.fetchData();
      }
    );
  };

  prevPage = () => {
    if (this.state.from !== 0) {
      const prevPageNumber = this.state.from - this.state.size;
      this.setState(
        {
          from: prevPageNumber
        },
        () => {
          this.fetchData();
        }
      );
    }
  };

  numberOfRecords = nrRec => {
    this.setState(
      {
        size: nrRec
      },
      () => {
        this.fetchData();
      }
    );
  };

  inputSearch = e => {
    const valueOfInput = e.target.value;
    this.setState(
      {
        from: 0,
        namePrefix: valueOfInput
      },
      () => {
        this.fetchData();
      }
    );
  };

  async fetchData() {
    let data = await axios
      .create({ withCredentials: true })
      .get("http://10.132.15.238:8777/console/properties/?", {
        params: {
          from: this.state.from,
          size: this.state.size,
          namePrefix: this.state.namePrefix
        },
        headers: { Authorization: "Basic YTph" }
      });
    this.setState({
      test: data.data.properties,
      sizeOfAll: data.data.size,
      currentPage: Math.ceil(this.state.from / this.state.size) + 1,
      numberOfPages: Math.ceil(this.state.sizeOfAll / this.state.size)
    });
  }

  handlePageClick = data => {
    let selected = data.selected;
    let offset = Math.ceil(selected * this.state.size);

    this.setState({ offset: offset }, () => {
      this.fetchData();
    });
  };

  toggle() {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }

  select(event) {
    this.setState(
      {
        dropdownOpen: !this.state.dropdownOpen,
        valueOfDropdown: event.target.innerText,
        size: event.target.innerText
      },
      () => {
        this.fetchData();
      }
    );
  }

  render() {
    return (
      <div className="App">
        <div className="PrevNextNr">
          <Button onClick={this.firstPage} className="btn" variant="primary">
            First
          </Button>
          <Button onClick={this.prevPage} className="btn" variant="primary">
            Previous
          </Button>
          <Button onClick={this.nextPage} className="btn" variant="primary">
            Next
          </Button>
          <Button onClick={this.lastPage} className="btn" variant="primary">
            Last
          </Button>
          <h3>
            {this.state.currentPage + " out of " + this.state.numberOfPages}
          </h3>
          <DropdownButton
            isOpen={this.state.dropdownOpen}
            toggle={this.toggle}
            id="dropdown-basic-button"
            title={"Nr of records: " + this.state.valueOfDropdown}
          >
            <Dropdown.Item onClick={this.select}>10</Dropdown.Item>
            <Dropdown.Item onClick={this.select}>20</Dropdown.Item>
            <Dropdown.Item onClick={this.select}>50</Dropdown.Item>
            <Dropdown.Item onClick={this.select}>100</Dropdown.Item>
          </DropdownButton>
        </div>
<div></div>
        <InputGroup onChange={e => this.inputSearch(e)} className="mb-3">
          <InputGroup.Prepend>
            <InputGroup.Text id="basic-addon1">Search:</InputGroup.Text>
          </InputGroup.Prepend>
          <FormControl
            placeholder="What are you looking for?"
            aria-label="Username"
            aria-describedby="basic-addon1"
          />
          <InputGroup.Append>
            <InputGroup.Text id="basic-addon2">
              Found: {this.state.sizeOfAll}
            </InputGroup.Text>
          </InputGroup.Append>
        </InputGroup>
        <table>
          <tbody>
            <tr>
              <td>property name</td>
              <td>property value</td>
            </tr>
            {this.state.test.map((item, index) => (
              <tr key={index}>
                <td>{item.property_name}</td>
                <td>{item.property_value}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default App;