// @flow
import React from "react";
import styled from "styled-components";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import CircularProgress from "@material-ui/core/CircularProgress";
import { withStyles } from "@material-ui/core/styles";

import UNINITIALISED from "modules/uninitialised";
import DemandTable from "./table";

import type { DemandMetaDataReportItem } from "shared/demand_data";

import typeof FetchDemandDataGroupsAction from "modules/demand_data/actions/demand_data_groups_fetch";
import typeof ClearDemandDataGroupsAction from "modules/demand_data/actions/demand_data_groups_clear";

const styles = theme => ({
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120,
  },
});

const Title = styled.h2`
  text-align: center;
`;

const CenteredDiv = styled.div`
  justify-content: center;
  display: flex;
`;

const LoadingWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
`;

type Props = {
  types: Object,
  groups: DemandMetaDataReportItem[],
  fetchDemandDataGroups: FetchDemandDataGroupsAction,
  clearDemandDataGroups: ClearDemandDataGroupsAction,
  classes: Object,
};

type State = {
  type: string,
  subType: string,
  loading: boolean,
};

class DemandData extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);

    if (props.types === UNINITIALISED) {
      this.state = {
        type: "",
        subType: "",
        loading: false,
      };
    } else {
      const type = Object.keys(props.types)[0];
      const subType = props.types[type][0];

      this.state = {
        type,
        subType,
        loading: true,
      };

      this.props.fetchDemandDataGroups([subType]);
    }
  }

  handleTypeChange = event => {
    if (event.target.value !== this.state.type) {
      const type = event.target.value;
      const subType = this.props.types[type][0];
      this.setState({ type, subType, loading: true });
      this.props.fetchDemandDataGroups([subType]);
    }
  };

  handleSubTypeChange = event => {
    if (event.target.value !== this.state.subType) {
      this.setState({
        subType: event.target.value,
        loading: true,
      });
      this.props.fetchDemandDataGroups([event.target.value]);
    }
  };

  componentWillReceiveProps(newProps: Props) {
    if (!this.state.type) {
      const type = Object.keys(newProps.types)[0];
      const subType = newProps.types[type][0];
      this.setState({ type, subType, loading: true });
      this.props.fetchDemandDataGroups([subType]);
    }

    if (newProps.groups !== UNINITIALISED) {
      this.setState({ loading: false });
    }
  }

  componentWillUnmount() {
    this.props.clearDemandDataGroups();
  }

  render() {
    const { classes } = this.props;
    const { loading } = this.state;

    return (
      <div>
        <Title>Demand Data</Title>
        <CenteredDiv>
          <FormControl className={classes.formControl}>
            <InputLabel htmlFor="type">Type</InputLabel>
            <Select
              inputProps={{ id: "type" }}
              value={this.state.type}
              onChange={this.handleTypeChange}
            >
              {Object.keys(this.props.types).map((type, i) => (
                <MenuItem key={i} value={type}>
                  {type[0].toUpperCase() + type.slice(1)}
                </MenuItem>
              ))}
            </Select>
          </FormControl>

          {this.state.type && (
            <FormControl className={classes.formControl}>
              <InputLabel htmlFor="sub-type">Sub type</InputLabel>
              <Select
                inputProps={{ id: "sub-type" }}
                value={this.state.subType}
                onChange={this.handleSubTypeChange}
              >
                {this.state.type &&
                  this.props.types[this.state.type].map((subType, i) => (
                    <MenuItem key={i} value={subType}>
                      {subType[0].toUpperCase() + subType.slice(1)}
                    </MenuItem>
                  ))}
              </Select>
            </FormControl>
          )}
        </CenteredDiv>
        {loading && (
          <LoadingWrapper>
            <CircularProgress />
          </LoadingWrapper>
        )}
        {!loading && <DemandTable data={this.props.groups} />}
      </div>
    );
  }
}

export default withStyles(styles)(DemandData);