import React, {Component} from 'react';
import ProfilePicture from '../../images/home/profilePicture.jpg';
import "./introduction.css";

const lineOneText = 'Hi, my name is Giovani.';
const lineTwoText = 'I am a software developer. ';

class Introduction extends Component {
  constructor(props) {
    super(props);

    let typingInterval = this.startTyping();
    this.state = {
      currentLineOne: '',
      currentLineTwo: '',
      currentCharLineOne: 0,
      currentCharLineTwo: 0,
      isCursorOneVisible: true,
      isCursorTwoVisible: false,
      typingInterval: typingInterval,
      cursorBlinkingInterval: null
    };
  }

  getLineOneText = () => {
    return lineOneText;
  }

  getLineTwoText = () => {
    return lineTwoText;
  }

  startTyping = () => {
    let typingInterval = setInterval(this.type, 55);
    return typingInterval;
  }

  startBlinking = () => {
    let blinkingInterval = setInterval(this.blink, 125);
    return blinkingInterval;
  }

  type = () => {
    let { currentLineOne, 
          currentCharLineOne,
          currentLineTwo,
          currentCharLineTwo,
          typingInterval,
          blinkingInterval,
          isCursorOneVisible,
          isCursorTwoVisible } = this.state;

    if (currentCharLineOne === 0 || currentCharLineOne !== this.getLineOneText().length) {
      isCursorOneVisible = true;
      isCursorTwoVisible = false;
      currentLineOne += this.getLineOneText()[currentCharLineOne];
      currentCharLineOne++;
    } else if (currentCharLineTwo === 0 || currentCharLineTwo !== this.getLineTwoText().length) { 
      isCursorOneVisible = false;
      isCursorTwoVisible = true;
      currentLineTwo += this.getLineTwoText()[currentCharLineTwo];
      currentCharLineTwo++;
    } else {
      clearInterval(typingInterval);
      blinkingInterval = setInterval(this.blink, 500, 2);
    }

    this.setState({ currentLineOne: currentLineOne, 
                    currentCharLineOne: currentCharLineOne,
                    currentLineTwo: currentLineTwo, 
                    currentCharLineTwo: currentCharLineTwo,
                    blinkingInterval: blinkingInterval,
                    isCursorOneVisible: isCursorOneVisible,
                    isCursorTwoVisible: isCursorTwoVisible });
  }

  blink = (cursorNumber) => {
    if (cursorNumber === 1) {
      this.setState({ isCursorOneVisible: !this.state.isCursorOneVisible });
    } else {
      this.setState({ isCursorTwoVisible: !this.state.isCursorTwoVisible });
    }
  }

  getCursorClasses = (cursorNumber) => {
    let isCursorVisible = cursorNumber === 1 ? this.state.isCursorOneVisible : this.state.isCursorTwoVisible;
    return `align-text-top ${isCursorVisible ? 'visible' : 'invisible'}`;
  }

  render() { 
    return (
      <div className="container-fluid pt-5" id="intro">
        <div className="row align-items-center pt-4 pt-lg-5 pb-1 pb-lg-3">
          <div className="col-12 col-lg-6">
            <div className="text-center text-lg-right">
              <img src={ProfilePicture} alt="Giovani's Face" className="profile-image rounded-circle img-fluid img-thumbnail" width="500" />
            </div>
          </div>
          <div className="col-12 col-lg-6 mt-3 mt-lg-1">
            <div className="pl-3"> 
              <h1 className="text-center text-lg-left line-one-type-size">{this.state.currentLineOne}<span className={this.getCursorClasses(1)}>|</span></h1>
              <h2 className="text-center text-lg-left line-two-type-size">{this.state.currentLineTwo}<span className={this.getCursorClasses(2)}>|</span></h2>
            </div>
            <a href="#bio">
              <div className="text-center text-lg-left pt-4 pt-lg-5 pl-3"> 
                <button type="button" className="btn btn-outline-primary btn-lg">Get To Know Me</button>
              </div>
            </a>
          </div>
        </div>
      </div>
    ); 
  }

  // componentDidUpdate() {
  // }
}

export default Introduction;