import React from "react";
import Layout from "../../../components/Layout";

import { Header, Form, Button, Checkbox, Message } from "semantic-ui-react";

class Ref extends React.Component {
  constructor(props) {
    super(props);
    this.firstNameRef = React.createRef();
    this.lastNameRef = React.createRef();
  }

  componentDidMount() {
    this.firstNameRef.current.focus();
  }

  handleKeyDown = (e) => {
    if (e.key === "Enter") {
      this.lastNameRef.current.focus();
    }
  };

  render() {
    return (
      <Layout>
        <Header as="h3">Ref Demo - Focus</Header>

        <Message info>
          <Message.Header>How this works</Message.Header>
          <p>
            When the page loads, we use{" "}
            <code>this.firstNameRef.current.focus()</code> to set focus on the
            First Name input.
            <br />
            When we press {`'Enter'`} in the First Name input, we use{" "}
            <code>this.lastNameRef.current.focus();</code> to set focus on the
            Last Name input.
          </p>
        </Message>

        <Form>
          <Form.Field>
            <label>First Name</label>
            <input
              placeholder="First Name"
              ref={this.firstNameRef}
              onKeyDown={this.handleKeyDown}
            />
          </Form.Field>
          <Form.Field>
            <label>Last Name</label>
            <input placeholder="Last Name" ref={this.lastNameRef} />
          </Form.Field>
          <Form.Field>
            <Checkbox label="I agree to the Terms and Conditions" />
          </Form.Field>
          <Button type="submit">Submit</Button>
        </Form>

        <Header as="h3">Codepen Demo</Header>
        <a href="" target="_blank">
          https://codepen.io/deniapps/pen/xxVGxNv
        </a>
      </Layout>
    );
  }
}

export default Ref;