import React, { Component } from "react";
import axios from "axios"; // npm instal axios
import { forwardRef } from "react";
import MaterialTable from "material-table";
import ArrowDownward from "@material-ui/icons/ArrowDownward";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import ChevronRight from "@material-ui/icons/ChevronRight";
import Clear from "@material-ui/icons/Clear";
import FilterList from "@material-ui/icons/FilterList";
import FirstPage from "@material-ui/icons/FirstPage";
import LastPage from "@material-ui/icons/LastPage";
import Search from "@material-ui/icons/Search";

const tableIcons = {
  //   DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => (
    <ChevronLeft {...props} ref={ref} />
  )),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
};

export default class MatDataTable extends Component {
  constructor(props) {
    super(props);
    this.state = { person: [] };
  }

  componentDidMount(prevProps) {
    const url = "http://vps.k-world.me.uk:3001/getUserAccounts";
    axios.get(url, { withCredentials: true }).then((results) => {
      console.log(results);
      console.log(results.data);
      this.setState({ person: results.data });

      var newArr = results.data.map(function (val) {
        let date = new Date(val.expiaryDate * 1000);
        let d = date.toGMTString();
        return {
          username: val.username,
          streamName: val.streamName,
          streamURL: val.streamURL,
          expiaryDate: d,
        };
      });
      console.log(results.data.results);
      this.setState(
        {
          tableArray: newArr, //set state of the weather5days
        },
        () => {
          console.log(this.state.tableArray);
          console.log("this.tableArray ", this.state.tableArray);
        }
      );
    });
  }

  render() {
    return (
      <div
        style={{ maxWidth: "100%", marginLeft: "50px", marginRight: "50px" }}
      >
        <MaterialTable
          icons={tableIcons}
          options={{
            grouping: false,
          }}
          columns={[
            {
              title: "Username",
              field: "username",
              type: "numeric",
              align: "left",
            },
            { title: "Stream Name", field: "streamName" },
            { title: "Stream URL", field: "streamURL" },
            { title: "Expiry Date", field: "expiaryDate", type: "numeric" },
          ]}
          data={this.state.tableArray}
          title="Stream Details"
        />
      </div>
    );
  }
}