import React, { Component } from 'react';
import { Link } from "react-router-dom";

import * as routes from './../../../constants/routes';
import { UserContext } from './../../../containers/header';
import token from './../../../utils/token';

export default class header extends Component {

    state = {
        togglerClosed: true,
    }

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

    handleSignOut = () => {
        console.log("signOut", this.props);
        this.props.signOut();
        localStorage.removeItem(token);
    }

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

        return (
            <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> */}
                <button style={{ position: "absolute", top: '85px', left: 0 }} onClick={this.handleToggle}>HEADER TOGGLE</button>
                <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>
                            {
                                data && data.is_admin && (
                                    <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 data
                            </Link>
                                        </li>
                                    </React.Fragment>
                                )
                            }
                        </ul>
                    </nav>

                    <div className="header__links">
                        {
                            !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={this.handleSignOut}
                                    >
                                        Sign out
                                    </button>
                                )
                        }
                    </div>
                </div>
            </header>
        )
    }
}