import React from "react";
import { Dropdown, Icon, Grid, Divider} from 'semantic-ui-react'
import { Segment, Image } from 'semantic-ui-react'

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='title7.png' size='medium' centered/>
  ) 



const GridExampleInverted = (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>
  )

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



        // const navbar = {
        //     backgroundColor: "#20222b",
        //     color: "white",
        //     marginBottom: "4.6rem",
        //     padding: "3.2rem 0"
        // };
        // const navbar__buttons = {
        //     borderBottom: "1px solid lighten($light-blue, 10%)",
        //     display: "flex",
        //     justifyContent: "space-between",
        //     padding: "3.2rem 1.6rem"
        // }
        // const button = {
        //         background: "#8357c5",
        //         border: "none",
        //         borderBottom: "1px solid purple",
        //         color: "white",
        //         fontWeight: "500",
        //         padding: "1.2rem"
        // }



//   const MenuExampleButtons = () => (
//     <Menu>
//       <Menu.Item>
//         <Button primary>Sign up</Button>
//       </Menu.Item>
  
//       <Menu.Item>
//         <Button>Log-in</Button>
//       </Menu.Item>
//       <Menu.Item>
//         <Button>Log-in</Button>
//       </Menu.Item>
//       <Menu.Item>
//         <Button>Log-in</Button>
//       </Menu.Item>
//     </Menu>
//   )








// class MenuExampleInvertedSegment extends Component {
//     state = { activeItem: 'home' }
  
//     handleItemClick = (e, { name }) => this.setState({ activeItem: name })
  
//     render() {
//       const { activeItem } = this.state
  
//       return (
//         <Segment inverted>
//           <Menu inverted secondary>
//             <Menu.Item
//               name='home'
//               active={activeItem === 'home'}
//               onClick={this.handleItemClick}
//             />
//             <Menu.Item
//               name='messages'
//               active={activeItem === 'messages'}
//               onClick={this.handleItemClick}
//             />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <HeaderExampleIconProp />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item />
//             <Menu.Item
//                 name='messages'
//                 active={activeItem === 'messages'}
//                 onClick={this.handleItemClick}
//             />
//             <Dropdown item icon='wrench' simple>
//             <Dropdown.Menu>
//               <Dropdown.Item>
//                 <Icon name='dropdown' />
//                 <span className='text'>New</span>
    
//                 <Dropdown.Menu>
//                   <Dropdown.Item>Document</Dropdown.Item>
//                   <Dropdown.Item>Image</Dropdown.Item>
//                 </Dropdown.Menu>
//               </Dropdown.Item>
//               <Dropdown.Item>Open</Dropdown.Item>
//               <Dropdown.Item>Save...</Dropdown.Item>
//               <Dropdown.Item>Edit Permissions</Dropdown.Item>
//               <Dropdown.Divider />
//               <Dropdown.Header>Export</Dropdown.Header>
//               <Dropdown.Item>Share</Dropdown.Item>
//             </Dropdown.Menu>
//           </Dropdown>
//             <ImageExampleWrapped /> 
//             <Menu.Item />
//           </Menu>
//         </Segment>
//       )
//     }
//   }