import React from "react";

import ValueLabelDisplay from "components/toolbox/ValueLabelDisplay";
import { Layer } from "nn-architecture/Layer";
import {
  Tabs,
  Tab,
  Box,
  AppBar,
  useTheme,
  Grid,
  Button,
  Divider,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Typography,
  Slider,
} from "@material-ui/core";
import { Activations, Initializers } from "nn-architecture/hyperparams";
import { useStyles } from "styles/NNFFToolboxStyles";
import { NNActions } from "state/NNActions";
import { useNNState } from "state/NNState";

const onNodesChanged = (layerIndex, units, nn_dispatch) => {
  nn_dispatch({
    type: NNActions.SET_NODES,
    layer: layerIndex,
    nodes: units,
  });
};

const onLayerRemove = (layerIndex, nn_dispatch) => {
  nn_dispatch({
    type: NNActions.REMOVE_LAYER,
    layer: layerIndex,
  });
};

const onLayerAdd = (nn_dispatch) => {
  nn_dispatch({
    type: NNActions.ADD_LAYER,
  });
};

const onLayerActivationChange = (event, layerIndex, nn_dispatch) => {
  nn_dispatch({
    type: NNActions.SET_LAYER_ACTIVATION,
    layer: layerIndex,
    activation: event.target.value,
  });
};

const onLayerInitializerChange = (event, layerIndex, nn_dispatch) => {
  nn_dispatch({
    type: NNActions.SET_LAYER_INITIALIZER,
    layer: layerIndex,
    initializer: event.target.value,
  });
};

function LayerOption({ layer, layerIndex, nn_dispatch }) {
  const classes = useStyles();
  if (layer == null) {
    return null;
  }
  return (
    <Grid className={classes.layerInputItem} item>
      {/* <Grid style={{ "margin-top": "28px" }} item>
          <Divider />
        </Grid> */}
      <Grid item>
        <Grid direction="row" className={classes.nodesItem} container>
          <Grid item>
            <Typography className={classes.nodesLabel} gutterBottom>
              Nodes
            </Typography>
          </Grid>
          <Grid className={classes.sliderWidth} item>
            <Slider
              value={layer.units}
              valueLabelDisplay="on"
              ValueLabelComponent={ValueLabelDisplay}
              step={1}
              marks
              min={1}
              max={10}
              onChange={(event, units) =>
                onNodesChanged(layerIndex, units, nn_dispatch)
              }
            />
          </Grid>
        </Grid>
      </Grid>
      <Grid item className={classes.actionItem}>
        <FormControl className={classes.actionWidth}>
          <InputLabel>Activation Function</InputLabel>
          <Select
            value={layer.activation}
            onChange={(event) =>
              onLayerActivationChange(event, layerIndex, nn_dispatch)
            }
          >
            {Object.keys(Activations).map((key) => (
              <MenuItem value={Activations[key]}>{Activations[key]}</MenuItem>
            ))}
          </Select>
        </FormControl>
      </Grid>
      <Grid item className={classes.actionItem}>
        <FormControl className={classes.actionWidth}>
          <InputLabel>Weight Initializer</InputLabel>
          <Select
            value={layer.initializer}
            onChange={(event) =>
              onLayerInitializerChange(event, layerIndex, nn_dispatch)
            }
          >
            {Object.keys(Initializers).map((key) => (
              <MenuItem value={Initializers[key]}>{Initializers[key]}</MenuItem>
            ))}
          </Select>
        </FormControl>
      </Grid>
    </Grid>
  );
}

export default function NNFFBuildPanelDetails() {
  const classes = useStyles();
  const { nn_state, nn_dispatch } = useNNState();

  return (
    <Grid container direction="column">
      <LayerOption
        layer={nn_state.layers[nn_state.selectedLayerIndex]}
        layerIndex={nn_state.selectedLayerIndex}
        nn_dispatch={nn_dispatch}
      />
      <Grid className={classes.actionItem} item>
        <Button
          disabled={nn_state.layers.length === 1}
          color="secondary"
          className={classes.button}
          variant="outlined"
          onClick={() =>
            onLayerRemove(nn_state.selectedLayerIndex, nn_dispatch)
          }
        >
          Remove layer {nn_state.selectedLayerIndex + 1}
        </Button>
      </Grid>
      <Grid item>
        <Button
          color="primary"
          className={`${classes.button} ${classes.marginTOP}`}
          variant="outlined"
          onClick={() => onLayerAdd(nn_dispatch)}
        >
          Add Hidden Layer
        </Button>
      </Grid>
    </Grid>
  );
}