import React ,{ Component } from 'react';
import "../Header/Header.scss";
import { NavLink } from "react-router-dom";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrello } from "@fortawesome/free-brands-svg-icons";
import { faHome, faSearch, faPlus, faInfoCircle, faBell } from "@fortawesome/free-solid-svg-icons";
import {
    
    faTimes
} from "@fortawesome/free-solid-svg-icons";
   export class  Header extends Component{
    constructor(props) {
        super(props);
        /*
        this.state = {
            showmenue: false,
            color: ""
        };
        */
       this.state = {
        cards: [],
        flag: false,
        showMenu: false,
        showMember: false
    };
    this.showMenu = this.showMenu.bind(this);
    }
    showMember(event) {
        //event.preventDefault();
        this.setState({ showMember: true }, () => {
            document.addEventListener("click", this.closeMenu);
        });
    }

    showMenu(event) {
        //event.preventDefault();
        this.setState({ showMenu: true }, () => {
            document.addEventListener("click", this.closeMenu);
        });
    }

    closeMenu(event) {
        // if (!this.dropdownMenu.contains(event.target)) {
        this.setState({ showMenu: false, showMember: false }, () => {
            document.removeEventListener("click", this.closeMenu);
        });
        //}
    }

   /* showmenue() {
        console.log("inside function");
        this.setState({ showmenue: true });
    }
*/
    remove() {
        console.log("inside function remove");
        this.setState({ showmenue: false });
    }
    render(){

    return(
    <header className="board_header">
        <NavLink to="/home" className="board_icon" ><FontAwesomeIcon icon={faHome} /></NavLink>
        <NavLink to="/home" className="board_icon"><FontAwesomeIcon icon={faTrello} /> Boards</NavLink>
        <NavLink to="/home" className="board_icon">
            <input
                type="text"
                className="search_input"
            />
            <FontAwesomeIcon icon={faSearch} />
        </NavLink>
        <span className="trello_text_span">
            <NavLink to="/home" className="trello_link_span">
                <FontAwesomeIcon icon={faTrello} />
                Trello
            </NavLink>
        </span>
        <div className="board_header_right">
            <NavLink to="/home" className="board_icon" ><FontAwesomeIcon icon={faPlus} /></NavLink>
            <NavLink to="/home" className="board_icon"><FontAwesomeIcon icon={faInfoCircle} /></NavLink>
            <NavLink to="/home" className="board_icon"><FontAwesomeIcon icon={faBell} /></NavLink>
            <span className="member_circle"  onClick={() => this.showMenu ()}>SA</span>
        </div>
        <div>
        {this.state.showMenu ? (
                                            <div
                                                className="menu_actions"
                                                ref={element => {
                                                    this.dropdownMenu = element;
                                                }}
                                            >
                                                <div className="title_menu">
                                                    <span>Sojood alsayyed (sojoodalsayyed)</span>
                                                    <NavLink
                                                        to="/home"
                                                        className="close_list_action"
                                                        onClick={e => {
                                                            this.closeMenu(e);
                                                        }}
                                                    >
                                                        <FontAwesomeIcon
                                                            icon={faTimes}
                                                            size="1x"
                                                        />
                                                    </NavLink>
                                                </div>
                                                <hr className="_hr" />
                                                <div>
                                                    <div className="actions_div">
                                                        <ul className="ull">
                                                            <li className="lii">
                                                                <NavLink
                                                                    to=""
                                                                    className="choice_itself"
                                                                >
                                                                    Profile
                                                                </NavLink>
                                                            </li>
                                                            <li className="lii">
                                                                <NavLink
                                                                    to=""
                                                                    className="choice_itself"
                                                                >
                                                                   Cards
                                                                </NavLink>
                                                            </li>
                                                            <li className="lii">
                                                                <NavLink
                                                                    to=""
                                                                    className="choice_itself"
                                                                >
                                                                    Setting
                                                                </NavLink>
                                                            </li>
                                                            
                                                        </ul>
                                                        <hr className="_hr" />
                                                        <ul className="ull">
                                                            <li className="lii">
                                                                <NavLink
                                                                    to=""
                                                                    className="choice_itself"
                                                                >
                                                                    Help
                                                                </NavLink>
                                                            </li>
                                                            <li className="lii">
                                                                <NavLink
                                                                    to=""
                                                                    className="choice_itself"
                                                                >
                                                                    Shortcuts
                                                                </NavLink>
                                                            </li>
                                                            <li className="lii">
                                                                <NavLink
                                                                    to=""
                                                                    className="choice_itself"
                                                                >
                                                                    Change language..
                                                                </NavLink>
                                                            </li>
                                                        </ul>
                                                        <hr className="_hr" />
                                                        <ul className="ull">
                                                            <li className="lii">
                                                                <NavLink
                                                                    to=""
                                                                    className="choice_itself"
                                                                >
                                                                    Move All
                                                                    Cards In
                                                                    This List...
                                                                </NavLink>
                                                            </li>
                                                            
                                                        </ul>
                                                        <hr className="_hr" />
                                                        <ul className="ull">
                                                            <li className="lii">
                                                                <NavLink
                                                                    to=""
                                                                    className="choice_itself"
                                                                >
                                                                    Archive This
                                                                    List
                                                                </NavLink>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        ) : null}
                    </div>
    </header>
    )
    }
};

export default Header;