import React, { Component } from 'react';
import { Link } from "react-router-dom";
import * as routes from './../../../constants/routes';
import { UserContext } from './../../../containers/header';

export default class header extends Component {

    state = {
        togglerClosed: true,
    }

    handleToggle = (event) => {
        this.setState((prevState) => ({ togglerClosed: !prevState.togglerClosed }))
    }

    render() {
        const { togglerClosed } = this.state;
        const toggleStatus = togglerClosed ? "toggle-status--closed" : "toggle-status--opened"

        return (
            <UserContext.Consumer>
                {
                    ({ user, signOut }) => (
                        <header className="header">
                            <Link to={routes.LANDING}>
                                <h1 className="header__logo">Test.<span className="header__logo--i-letter">i</span>o</h1>
                            </Link>
                            <hr className="header__logo--divider" />
                            <span className="header__toggle-trigger" onClick={this.handleToggle} >
                                <span />
                            </span>
                            <div className="header__flex-wrapper">
                                <nav className={`header__nav ${toggleStatus}`}>
                                    <ul className="header__nav nav__list"  >
                                        <li>
                                            <Link className="header__nav nav__list-item" to={routes.HOME}>
                                                Home
                                            </Link>
                                        </li>
                                        <li>
                                            <Link className="header__nav nav__list-item" to={routes.PROFILE}>
                                                Profile
                                            </Link>
                                        </li>
                                        <li>
                                            <Link className="header__nav nav__list-item" to={routes.TESTS}>
                                                Test
                                            </Link>
                                        </li>
                                        <li>
                                            <Link className="header__nav nav__list-item" to={routes.CATEGORIES}>
                                                Categories
                                            </Link>
                                        </li>
                                        {
                                            user && user.isAdmin && (
                                                <React.Fragment>
                                                    <li>
                                                        <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_TEST}>
                                                            Create test
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_CATEGORY}>
                                                            Create category
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link className="header__nav nav__list-item--admin-only" to={routes.DELETE_USER}>
                                                            Delete user
                                                        </Link>
                                                    </li>
                                                </React.Fragment>
                                            )
                                        }
                                    </ul>
                                </nav>

                                <div className="header__links">
                                    {
                                        !user.data
                                            ? (
                                                <React.Fragment>
                                                    <Link className="header__links--sign-in link--btn link--btn25" to={routes.SIGN_IN}>Sign in</Link>
                                                    <Link className="header__links--sign-up link--btn link--btn25" to={routes.SIGN_UP}>Sign up</Link>
                                                </React.Fragment>
                                            )
                                            : (
                                                <button
                                                    className="header__links--sign-in link--btn link--btn25"
                                                    onClick={signOut}
                                                >
                                                    Sign out
                                                </button>
                                            )
                                    }
                                </div>
                            </div>
                        </header>
                    )
                }
            </UserContext.Consumer>
        )
    }
}