import React, { useEffect } from "react";

import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import ButtonBase from "@material-ui/core/ButtonBase";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Button from "@material-ui/core/Button";
//import Breadcrumbs from '@material-ui/core/Breadcrumbs';

const Schedules = (props) => {
  const { globalUrl } = props;

  //const [schedules, setSchedules] = React.useState(scheduledata);
  const [schedules, setSchedules] = React.useState({});

  const getAvailableSchedules = () => {
    fetch(globalUrl + "/api/v1/schedules", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setSchedules(responseJson);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // FIXME - add automated redirection, as empty apps look horrible currently
  const newSchedule = () => {
    fetch(globalUrl + "/api/v1/schedules/new", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify(),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
        setSchedules({});
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const deleteSchedule = (id) => {
    if (id === undefined) {
      return;
    }

    fetch(globalUrl + "/api/v1/schedules/" + id + "/delete", {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setSchedules({});
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // FIXME - use this?
  //const getNewScheduleInfo = () => {
  //	fetch(globalUrl+"/api/v1/schedules", {
  //	  	method: 'GET',
  //			headers: {
  //				'Content-Type': 'application/json',
  //				'Accept': 'application/json',
  //			},
  //		})
  //	.then((response) => response.json())
  //	.then((responseJson) => {
  //		setSchedules(responseJson)
  //	})
  //	.catch(error => {
  //		console.log(error)
  //	});
  //}

  useEffect(() => {
    if (Object.getOwnPropertyNames(schedules).length <= 0) {
      getAvailableSchedules();
    }
  });

  const bodyDivStyle = {
    marginLeft: "20px",
    marginRight: "20px",
    width: "1350px",
    minWidth: "1350px",
    maxWidth: "1350px",
  };

  const scheduleApp = (app) => {
    console.log(app);
    return (
      <Grid container spacing={2} style={{ margin: "10px 10px 10px 10px" }}>
        <Grid item>
          <ButtonBase>
            <img alt="" style={{ width: "100px", height: "100px" }} />
          </ButtonBase>
        </Grid>
        <Grid item xs={12} sm container>
          <Grid item xs container direction="column" spacing={2}>
            <Grid item xs>
              <div>
                <h2>{app.name}</h2>
              </div>
              <div>{app.description}</div>
            </Grid>
            <Grid item>{app.action}</Grid>
          </Grid>
        </Grid>
      </Grid>
    );
  };

  const splitter = (
    <div
      style={{
        width: "1px",
        backgroundColor: "grey",
        margin: "5px 5px 5px 5px",
      }}
    />
  );

  const hrefStyle = {
    color: "#385f71",
    textDecoration: "none",
  };

  // FIXME - add Schedule modal
  const schedulePaper = (schedule) => {
    return (
      <div>
        <Paper
          style={{
            maxWidth: "1000px",
            display: "flex",
            padding: "10px 10px 10px 10px",
          }}
        >
          <div style={{ flex: "5" }}>
            {scheduleApp(schedule.appinfo.sourceapp)}
          </div>
          <div style={{ flex: "1", alignItems: "center" }}>ARROW</div>
          <div style={{ flex: "5" }}>
            {scheduleApp(schedule.appinfo.destinationapp)}
          </div>
          {splitter}
          <div style={{ flex: "1" }}>
            <List style={{ backgroundColor: "#ffffff" }}>
              <ListItem style={{ flex: "1", textAlign: "center" }}>
                <a href={"/schedules/" + schedule.id} style={hrefStyle}>
                  <Button disabled={false} color="primary">
                    Edit
                  </Button>
                </a>
              </ListItem>
              <ListItem style={{ flex: "1", textAlign: "center" }}>
                <Button
                  disabled={false}
                  onClick={() => {
                    deleteSchedule(schedule.id);
                  }}
                  color="primary"
                >
                  Delete
                </Button>
              </ListItem>
            </List>
          </div>
        </Paper>
      </div>
    );
  };

  console.log(schedules);
  console.log(schedules);
  console.log(schedules.schedules);
  const schedulemap =
    Object.getOwnPropertyNames(schedules).length > 0 &&
    schedules.schedules &&
    schedules.schedules.length > 0 ? (
      <div>{schedules.schedules.map((data) => schedulePaper(data))}</div>
    ) : (
      <div style={{ marginTop: "10%", marginLeft: "50%" }}>
        <Button
          disabled={false}
          onClick={() => {
            newSchedule();
          }}
          variant="outlined"
          color="primary"
        >
          CREATE NEW SCHEDULE
        </Button>
      </div>
    );

  const scheduleView =
    Object.getOwnPropertyNames(schedules).length > 0 ? (
      <div style={bodyDivStyle}>
        <Button
          disabled={false}
          onClick={() => {
            newSchedule();
          }}
          color="primary"
        >
          New
        </Button>
        {schedulemap}
      </div>
    ) : null;

  // Maybe use gridview or something, idk
  return <div>{scheduleView}</div>;
};

export default Schedules;