import React from 'react';
import {
  Grid,
  Divider,
  Button,
  Label,
  Responsive,
  Checkbox,
 Segment, Image,
} from 'semantic-ui-react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { RemoteService } from '../remote';
import SimulationPanel from './SimulationPanel';

const IconHomeImage = () => (
  <Image
    src="smart-home.png"
    style={{ width: '50px', height: 'auto' }}
    centered
    as="a"
    href="/"
  />
);

const TitleImage = () => <Image src="sm_logo.png" size="medium" centered />;

class MyHeader extends React.Component {
  constructor(props) {
    super(props);
    this.state = { simulationPanel: undefined };
    this.getInfo();
    this.logout = this.logout.bind(this);
  }

  logout() {
    this.props.logout().then(() => this.props.history.push('/'));
  }

  getInfo() {
    this.props
      .fetchUserInfo()
      .catch((err) => console.error('MyHeader fetch user info error', err));
  }

  setCameraEnabled(val) {
    const enabled = {
      cameraEnabled: val,
    };
    this.props
      .userPermissions(enabled)
      .then(() => this.getInfo())
      .catch((err) => console.error('Camera enabled', err));
  }

  openSimulationPanel = () => {
    this.setState((state) => ({ simulationPanel: true }));
  };

  closeSimulationPanel = () => {
    this.setState((state) => ({ simulationPanel: undefined }));
  };


  render() {
    return (
      <div>
        <SimulationPanel
          simulationPanel={this.state.simulationPanel}
          closeSimulationPanel={this.closeSimulationPanel}
        />
        <Responsive minWidth={768}>
          <Grid verticalAlign="middle" columns="equal" divided inverted padded>
            <Grid.Row color="black" textAlign="center">
              <Grid.Column width={4} height={0.5}>
                <Grid.Row>
                  <Segment color="black" inverted>
                    <IconHomeImage />
                  </Segment>
                </Grid.Row>
                <Divider />
                <Grid.Row>
                  <Button basic inverted onClick={this.openSimulationPanel}>
                  Simulation Panel
                  </Button>
                </Grid.Row>
              </Grid.Column>
              <Grid.Column>
                <Segment color="black" inverted>
                  <TitleImage />
                </Segment>
              </Grid.Column>
              <Grid.Column width={4} heigth={1}>
                <Label as="a" image color="black">
                  <img alt="SmartHut logo" src="smart-home.png" />
                  {this.props.username}
                </Label>
                <Divider />
                <Button basic inverted onClick={this.logout}>
                  Logout
                </Button>
                <Divider />
                <Segment
                  color="grey"
                  inverted
                  compact
                  style={{
                    margin: 'auto',
                    marginTop: '1em',
                    textAlign: 'center',
                  }}
                >
                  <Checkbox
                    label={<label>Share cameras</label>}
                    checked={this.props.cameraEnabled}
                    onChange={(e, val) => this.setCameraEnabled(val.checked)}
                  />
                </Segment>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Responsive>
        <Responsive maxWidth={768}>
          <Grid columns="equal" divided inverted padded>
            <Grid.Row color="black" textAlign="center">
              <Segment color="black" inverted>
                <TitleImage />
              </Segment>
            </Grid.Row>
            <Grid.Row color="black" textAlign="center">
              <Grid.Column>
                <Grid.Row>
                  <IconHomeImage />
                </Grid.Row>
                <Divider />
                <Grid.Row>
                  <Button onClick={this.openSimulationPanel}>
                  Simulation Panel
                  </Button>
                </Grid.Row>
              </Grid.Column>
              <Divider />
              <Grid.Column>
                <Grid.Column width={4} heigth={1}>
                  <Label as="a" image color="black">
                    <img alt="SmartHut logo" src="smart-home.png" />
                    {this.props.username}
                  </Label>
                  <Divider />
                  <Button basic inverted onClick={this.logout}>
                  Logout
                  </Button>
                  <Divider />
                  <Segment
                    compact
                    style={{
                    margin: 'auto',
                    marginTop: '1em',
                    textAlign: 'center',
                  }}
                  >
                    <Checkbox
                      label={<label>Share cameras</label>}
                      checked={this.props.cameraEnabled}
                      onChange={(e, val) => this.setCameraEnabled(val.checked)}
                    />
                  </Segment>
                </Grid.Column>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Responsive>
      </div>
    );
  }
}

const mapStateToProps = (state, _) => ({
  username:
    state.userInfo && state.userInfo.username ? state.userInfo.username : '',
  cameraEnabled: state.userInfo ? state.userInfo.cameraEnabled : false,
});
const LoginContainer = connect(
  mapStateToProps,
  RemoteService,
)(withRouter(MyHeader));
export default LoginContainer;