import React, { Component } from "react";
import { render } from "react-dom";
import HomeNavbar from "./../components/HomeNavbar";
import {
  Container,
  Icon,
  Image,
  Menu,
  Sidebar,
  Responsive,
  Header,
  Divider,
  Message,
  Grid
} from "semantic-ui-react";

class Paragraph extends Component {
    state = { visible: true }
  
    handleDismiss = () => {
      this.setState({ visible: false })
  
      setTimeout(() => {
        this.setState({ visible: true })
      }, 2000)
    }
  
    render() {
      if (this.state.visible) {
        return (
          <Message
            onDismiss={this.handleDismiss}
            header='Link has been sent!'
            content='An e-mail has been sent your address, please follow the
            instruction to create a new password'
          />
        )
      }
  
      return (
        <p>
          <br />
          <i>The message will return in 2s</i>
          <br />
          <br />
        </p>
      )
    }
  }


  const MessageReg = () => (
    <Grid>
    <HomeNavbar />
    <Divider />
    <Grid.Row height={3}>
    </Grid.Row> 
    <Grid.Row height={3}>
    </Grid.Row> 
    <Grid.Row height={3}>
    </Grid.Row> 
    <Grid.Row height={3}>
        <Grid.Column width={6}>
        </Grid.Column>
        <Grid.Column width={10}>
        <Image src='title5.png' />
        </Grid.Column>
    <Grid.Column width={3}>
    </Grid.Column>
    </Grid.Row> 
    <Grid.Row height={3}>
    </Grid.Row> 
    <Grid.Row height={3}>
    </Grid.Row> 
    <Grid.Column width={3}>
    </Grid.Column>
    <Grid.Column width={4}>
      <Image src='./img/logo.png' />
     </Grid.Column>
    <Grid.Column width={6}>
    <Paragraph />
    </Grid.Column>
    <Grid.Column width={4}>
    </Grid.Column>
    <Grid.Row height={3}>
    </Grid.Row> 
    <Grid.Row height={3}>
    </Grid.Row> 
    <Grid.Row height={3}>
    <Grid.Column width={3}>
    </Grid.Column>
    <Grid.Column width={10}>
      <Divider />
    </Grid.Column>
    <Grid.Column width={3}>
    </Grid.Column>
    </Grid.Row> 
    </Grid>
  ) 

export default class ForgotPasswrod extends React.Component {
  render () {
    return (
        <MessageReg />
    )
  }
}