import { makeStyles } from "@material-ui/core/styles";
import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle";
import React, { useCallback, useState } from "react";
import { connect, ConnectedProps } from "react-redux";
import { listGroupsAsync } from "../actions/groupsActions";
import { GroupInfo } from "../api";
import { usePolling } from "../hooks";
import { AppState } from "../store";
import AggregatingTasksTable from "./AggregatingTasksTable";
import GroupSelect from "./GroupSelect";

const useStyles = makeStyles((theme) => ({
  groupSelector: {
    paddingTop: theme.spacing(1),
    paddingBottom: theme.spacing(1),
    paddingLeft: theme.spacing(2),
    paddingRight: theme.spacing(2),
  },
  alert: {
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
  },
}));

function mapStateToProps(state: AppState) {
  return {
    groups: state.groups.data,
    groupsError: state.groups.error,
    pollInterval: state.settings.pollInterval,
  };
}

const mapDispatchToProps = {
  listGroupsAsync,
};

const connector = connect(mapStateToProps, mapDispatchToProps);

interface Props {
  queue: string;
}

function AggregatingTasksTableContainer(
  props: Props & ConnectedProps<typeof connector>
) {
  const [selectedGroup, setSelectedGroup] = useState<GroupInfo | null>(null);
  const { pollInterval, listGroupsAsync, queue } = props;
  const classes = useStyles();

  const fetchGroups = useCallback(() => {
    listGroupsAsync(queue);
  }, [listGroupsAsync, queue]);

  usePolling(fetchGroups, pollInterval);

  if (props.groupsError.length > 0) {
    return (
      <Alert severity="error" className={classes.alert}>
        <AlertTitle>Error</AlertTitle>
        {props.groupsError}
      </Alert>
    );
  }
  if (props.groups.length === 0) {
    return (
      <Alert severity="info" className={classes.alert}>
        <AlertTitle>Info</AlertTitle>
        No aggregating tasks at this time.
      </Alert>
    );
  }

  return (
    <div>
      <div className={classes.groupSelector}>
        <GroupSelect
          selected={selectedGroup}
          onSelect={setSelectedGroup}
          groups={props.groups}
          error={props.groupsError}
        />
      </div>
      {selectedGroup !== null ? (
        <AggregatingTasksTable
          queue={props.queue}
          totalTaskCount={selectedGroup.size}
          selectedGroup={selectedGroup.group}
        />
      ) : (
        <Alert severity="info" className={classes.alert}>
          <AlertTitle>Info</AlertTitle>
          <div>Please select group</div>
        </Alert>
      )}
    </div>
  );
}

export default connector(AggregatingTasksTableContainer);