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