import React, { Component } from "react";
import axios from "axios";
import { DB_LINK } from "../../globals";

import AdvancedTable from "../../components/CommonCode/HelperComponents/AdvancedTable";
import CheckboxComp from "../../components/CommonCode/HOC/CheckboxComp";
import { map, mapKeys } from "lodash";

class Settings extends Component {
  state = {
    data: []
  };

  columns = [
    {
      Header: "PageName",
      accessor: "pageName"
    },
    {
      Header: "Physician",
      accessor: "physician",
      Cell: props => (
        <CheckboxComp
          name="physician"
          checked={this.state.chosenObject}
          onChange={this.handleToggle(props.original.pageName)}
        />
      )
    },

    {
      Header: "User",
      accessor: "assistant",
      Cell: props => (
        <CheckboxComp
          name="assistant"
          checked={this.state.chosenObject}
          onChange={this.handleToggle(props.original.pageName)}
        />
      )
    }
  ];

  handleToggle = pagename => e => {
    const { name, value } = e.target;

    let x = this.state.chosenObject;
    console.log(x[pagename]["pageName"]);

    this.setState({});

    x[pagename][name];
  };

  componentDidMount() {
    const data = [
      {
        pageName: "Agenda",
        physician: "true",
        assistant: "false"
      },
      {
        pageName: "Patient List",
        physician: "true",
        assistant: "false"
      }
    ];

    let chosen = {};
    chosen = map(data, function(value, key) {
      return {
        pageName: value.pageName,
        physician: value.physician,
        assistant: value.assistant
      };
    });

    let chosenObject = mapKeys(chosen, "pageName");

    this.setState({ chosenObject, data });
    // this.SaveSettings();

    // this.LoadSettings();
  }

  LoadSettings = () => {
    axios({
      method: "post",
      url: `${DB_LINK}SettingsInit`,
      data: {}
    })
      .then(response => {
        const data = JSON.parse(response.data.SettingsInitResult);
        this.setState({ data });
      })
      .catch(error => {
        console.log("Error executing request", error);
      });
  };

  render() {
    console.log("wennn sert", this.state.chosenObject);
    return (
      <div>
        <button className="btn btn-primary" onClick={this.saveList}>
          Save
        </button>

        <AdvancedTable
          columns={this.columns}
          dataArray={this.state.data}
          hideDate={true}
        />
      </div>
    );
  }
}

export default Settings;