import React from "react";
import { Dropdown, Icon, Grid, Divider } from "semantic-ui-react";
import { Segment, Image } from "semantic-ui-react";
import {
  BrowserView,
  MobileView,
  isBrowser,
  isMobile
} 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 IconHomeImageMobile = () => (
  <Image
    src="smart-home.png"
    style={{ width: "10px", height: "auto" }}
    centered
    as="a"
    href="/"
  />
);

const TitleImage = () => (
  <Image 
    src="title7.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>
    );
  }
}