// vim: set ts=2 sw=2 et tw=80:

import React, { Component } from "react";
import { Grid, Card } from "semantic-ui-react";
import Device from "./devices/Device";
import NewDevice from "./devices/NewDevice";
import { connect } from "react-redux";
import { RemoteService } from "../../remote";

class DevicePanel extends Component {
  constructor(props) {
    super(props);

    this.getDevices();
  }

  getDevices() {
    if (this.props.tab === "Devices") {
      this.props
        .fetchDevices()
        .catch((err) => console.error(`error fetching devices:`, err));
    }
  }

  render() {
    return (
      <Card.Group style={{ paddingTop: "3rem" }}>
        {this.props.devices.map((e, i) => {
          return (
            <Grid.Column key={i}>
              <Device tab={this.props.tab} id={e.id} />
            </Grid.Column>
          );
        })}
        {!this.props.isActiveRoomHome ? (
          <Grid.Column>
            <NewDevice />
          </Grid.Column>
        ) : null}
      </Card.Group>
    );
  }
}

const mapStateToProps = (state, _) => ({
  get devices() {
    if (state.active.activeRoom === -1) {
      return Object.values(state.devices);
    } else {
      const deviceArray = [
        ...state.rooms[state.active.activeRoom].devices,
      ].sort();
      return deviceArray.map((id) => state.devices[id]);
    }
  },
  get isActiveRoomHome() {
    return state.active.activeRoom === -1;
  },
  activeRoom: state.active.activeRoom,
});
const DevicePanelContainer = connect(
  mapStateToProps,
  RemoteService
)(DevicePanel);
export default DevicePanelContainer;