import React from "react";
import {
  Dropdown,
  Icon,
  Grid,
  Divider,
  Button,
  Label,
  Responsive,
} from "semantic-ui-react";
import { Segment, Image } from "semantic-ui-react";
import { BrowserView, MobileView } from "react-device-detect";
import { call } from "../client_server";

const AvatarImage = () => (
  <Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
);

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 />;

export default class MyHeader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
    };

    this.getInfo();
  }
  getInfo() {
    call.getUserInfo(this.state.token).then((res) => {
      if (res.status === 200) {
        this.setState({
          username: res.data.username,
        });
      }
    });
  }
  render() {
    return (
      <div>
        <Responsive minWidth={768}>
          <Grid columns="equal" divided inverted padded>
            <Grid.Row color="black" textAlign="center">
              <Grid.Column width={3} height={0.5}>
                <Segment color="black" inverted>
                  <IconHomeImage />
                </Segment>
              </Grid.Column>
              <Grid.Column>
                <Segment color="black" inverted>
                  <TitleImage />
                </Segment>
              </Grid.Column>
              <Grid.Column width={2} heigth={1}>
                <Label as="a" image color="black">
                  <img alt="SmartHut logo" src="smart-home.png" />
                  {this.state.username}
                </Label>
                <Divider />
                <Button onClick={this.props.logout}>Logout</Button>
              </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>
                <IconHomeImage />
              </Grid.Column>
              <Grid.Column>
                <Label as="a" image color="black">
                  <img alt="SmartHut logo" src="smart-home.png" />
                  {this.state.username}
                </Label>
                <Divider />
                <Button onClick={this.props.logout}>Logout</Button>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Responsive>
      </div>
    );
  }
}