import React, { Component } from "react";
import { render } from "react-dom";
import { Button, Menu, Header, Dropdown, Icon, Grid, Divider} from 'semantic-ui-react'
import { Segment, Image } from 'semantic-ui-react'

const ImageExampleWrapped = () => (
    <Image src='avatar3.png' size='tiny' centered
        
    />
  )

  const ImageExampleWrapped2 = () => (
    <Image 
        src='smart-home.png' 
        size='tiny' 
        centered
        as='a'
        href='/'
    />
  )  

const ImageExampleWrapped3 = () => (
    <Image src='title2.png' size='medium' centered/>
  ) 

const HeaderExampleIconProp = () => (
    <Header as='h2' icon='plug' color="white" content='Smart Hut' />
)



const GridExampleInverted = () => (
    <Grid columns='equal' divided inverted padded >
      <Grid.Row color='black' textAlign='center'>
        <Grid.Column width={2}>
          <Segment color='black' inverted>
          <ImageExampleWrapped2 /> 
          </Segment>
        </Grid.Column>
        <Grid.Column>
          <Segment color='black' inverted>
          <ImageExampleWrapped3 />
          </Segment>
        </Grid.Column>
        <Grid.Column width={3}>
        <ImageExampleWrapped /> 
        <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>Logout</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  )

export default class MyHeader extends React.Component {
    render() {
        return (
          <div>
            <GridExampleInverted />
          </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>
//       )
//     }
//   }