import React, { Component } from 'react';
import { Container, Flex } from 'app/components/Layout';
import {
  LoginForm,
  RegisterForm,
  ForgotPasswordForm
} from 'app/components/LoginForm';
import styles from './PublicFrontpage.css';
import bekkLogo from 'app/assets/bekk_small.png';
import { Link } from 'react-router';

class PublicFrontpage extends Component {
  state = {
    registerUser: false,
    forgotPassword: false
  };

  toggleRegisterUser = () => this.setState({ registerUser: true });

  toggleForgotPassword = () => this.setState({ forgotPassword: true });

  toggleBack = () =>
    this.setState({ registerUser: false, forgotPassword: false });

  render() {
    const { registerUser, forgotPassword } = this.state;

    let title, form;
    if (registerUser) {
      title = 'Registrer bruker';
      form = <RegisterForm />;
    } else if (forgotPassword) {
      title = 'Glemt passord';
      form = <ForgotPasswordForm />;
    } else {
      title = 'Logg inn';
      form = <LoginForm />;
    }

    return (
      <Container>
        <Flex wrap justifyContent="space-between" className={styles.root}>
          <div className={styles.smallWelcomeBox}>
            <Flex
              component="h2"
              justifyContent="space-between"
              alignItems="center"
              className="u-mb"
              style={{ whiteSpace: 'nowrap' }}
            >
              {title}
              {!(registerUser || forgotPassword) && (
                <div>
                  <button
                    onClick={this.toggleForgotPassword}
                    className={styles.toggleButton}
                  >
                    Glemt passord
                  </button>
                  <span className={styles.toggleButton}>&bull;</span>
                  <button
                    onClick={this.toggleRegisterUser}
                    className={styles.toggleButton}
                  >
                    Jeg er ny
                  </button>
                </div>
              )}
              {(registerUser || forgotPassword) && (
                <button
                  onClick={this.toggleBack}
                  className={styles.toggleButton}
                >
                  Tilbake
                </button>
              )}
            </Flex>
            {form}
          </div>
          <div className={styles.bigWelcomeBox}>
            <h2 className={`${styles.header} u-mb`}>
              Velkommen til Abakus
              <a href="https://bekk.no">
                <img className={styles.sponsor} src={bekkLogo} alt="BEKK" />
              </a>
            </h2>
            <p>
              Abakus er linjeforeningen for studentene ved Datateknologi og
              Kommunikasjonsteknologi på NTNU, og drives av studenter ved disse
              studiene.
            </p>
            <p>
              Abakus
              {"'"} formål er å gi disse studentene veiledning i
              studiesituasjonen, arrangere kurs som utfyller fagtilbudet ved
              NTNU, fremme kontakten med næringslivet og bidra med sosiale
              aktiviteter.
            </p>
            <p style={{ fontWeight: 700, fontSize: '20px' }}>
              <span style={{ color: 'red' }}>OBS!</span> I overgangen til ny
              nettside er alle brukere nødt til å lage nytt passord. Klikk på
              &quot;Glemt passord&quot; for å begynne.
            </p>
          </div>
        </Flex>

        <Flex wrap className={styles.bottomContainer}>
          <div className={styles.usefulLinks}>
            <h2 className="u-mb">Nyttige linker</h2>
            <ul>
              <li>
                <a href="https://www.ntnu.no/studier/mtdt">
                  <i className="fa fa-caret-right" /> Om Datateknologi
                </a>
                <div className={styles.linkDescription}>
                  Datateknologi er en helt sentral del av alle fremtidsrettede
                  teknologier, som for eksempel kunstig intelligens, medisinsk
                  teknologi og søkemotorteknologi.
                </div>
              </li>
              <li>
                <a href="http://www.ntnu.no/studier/mtkom">
                  <i className="fa fa-caret-right" /> Om Kommunikasjonsteknologi
                </a>
                <div className={styles.linkDescription}>
                  Vi bruker stadig mer av livene våre på nett, på jobb som i
                  fritid. Kommunikasjonsteknologi brukes etter hvert av alle og
                  overalt.
                </div>
              </li>
              <li>
                <Link to="/pages/info/for-bedrifter">
                  <i className="fa fa-caret-right" /> For bedrifter
                </Link>
                <div className={styles.linkDescription}>
                  Her finner du som bedriftsrepresentant informasjon om Abakus{
                    "' "
                  }
                  prosedyrer for bedriftspresentasjoner og andre nyttige fakta.
                </div>
              </li>
            </ul>
          </div>

          <div className={styles.facebook}>
            <iframe
              src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAbakusNTNU%2F&amp;tabs=timeline&amp;width=420&amp;small_header=true&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=true&amp;appId=1717809791769695"
              style={{
                border: 'none',
                overflow: 'hidden',
                height: '500px',
                width: '420px'
              }}
              title="facebook"
              scrolling="no"
              frameBorder="0"
              allowTransparency="true"
            />
          </div>
        </Flex>
      </Container>
    );
  }
}

export default PublicFrontpage;

@@ -3146,297 +3146,8 @@
 /p%3E%0A
-            %3Cp style=%7B%7B fontWeight: 700, fontSize: '20px' %7D%7D%3E%0A              %3Cspan style=%7B%7B color: 'red' %7D%7D%3EOBS!%3C/span%3E I overgangen til ny%0A              nettside er alle brukere n%C3%B8dt til %C3%A5 lage nytt passord. Klikk p%C3%A5%0A              &quot;Glemt passord&quot; for %C3%A5 begynne.%0A            %3C/p%3E%0A
     

Remove the 'obs click reset pw' text on our login screen