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

import React, { Component } from "react";
import { Grid } from "semantic-ui-react";
import { editButtonStyle, panelStyle } from "./devices/styleComponents";
import { checkMaxLength, DEVICE_NAME_MAX_LENGTH } from "./devices/constants";
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() {
    this.props
      .fetchDevices()
      .catch((err) => console.error(`error fetching devices:`, err));
  }

  render() {
    return (
      <div style={panelStyle}>
        <Grid doubling columns={2} divided="vertically">
          {this.props.devices.map((e, i) => {
            return (
              <Grid.Column key={i}>
                <Device id={e.id} />
              </Grid.Column>
            );
          })}
          {!this.props.isActiveRoomHome ? (
            <Grid.Column>
              <NewDevice />
            </Grid.Column>
          ) : null}
        </Grid>
      </div>
    );
  }
}

const mapStateToProps = (state, _) => ({
  get devices() {
    if (state.active.activeRoom === -1) {
      return Object.values(state.devices);
    } else {
      const deviceArray = [...state.rooms[state.active.activeRoom].devices];
      console.log(deviceArray);
      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;