import React from "react";
import { Dropdown, Icon, Grid, Divider } from "semantic-ui-react";
import { Segment, Image } from "semantic-ui-react";
import { BrowserView, MobileView } from "react-device-detect";

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

const BrowserStructure = (props) => (
  <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}>
        <AvatarImage />
        <Divider />
        <Dropdown item icon="setting" size="huge">
          <Dropdown.Menu>
            <Dropdown.Item>
              <Icon name="dropdown" />
              <span className="text">Settings</span>
              <Dropdown.Menu>
                <Dropdown.Item>Document</Dropdown.Item>
                <Dropdown.Item>Image</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown.Item>
            <Dropdown.Item>See profile...</Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </Grid.Column>
    </Grid.Row>
  </Grid>
);

const MobileStructure = (props) => (
  <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>
        <AvatarImage />
        <Divider />
        <Dropdown item icon="setting" size="huge">
          <Dropdown.Menu>
            <Dropdown.Item>
              <Icon name="dropdown" />
              <span className="text">Settings</span>
              <Dropdown.Menu>
                <Dropdown.Item>Document</Dropdown.Item>
                <Dropdown.Item>Image</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown.Item>
            <Dropdown.Item>See profile...</Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </Grid.Column>
    </Grid.Row>
  </Grid>
);

export default class MyHeader extends React.Component {
  render() {
    return (
      <div>
        <BrowserView>
          <BrowserStructure logout={this.props.logout} />
        </BrowserView>
        <MobileView>
          <MobileStructure />
        </MobileView>
      </div>
    );
  }
}