import * as React from 'react';
import { Panel, PanelType } from "office-ui-fabric-react/lib/Panel";
import { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';
import 'office-ui-fabric-react/lib/components/Persona/examples/PersonaExample.scss';
import { Link, TextField, DefaultButton, SwatchColorPicker } from "office-ui-fabric-react";
import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
import { List } from 'office-ui-fabric-react/lib/List';
import 'office-ui-fabric-react/lib/components/List/examples/List.Ghosting.Example.scss';
import './Header.css'
import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
import { IntlConsumer } from "../Utils/IntlContext";
import { CachingService } from '../Services';
import { FormattedMessage } from 'react-intl';


// const saFlag = require('../Assets/images/sa.png');
// const gbFlag = require('../Assets/images/gb.png');

export interface IListGhostingExampleProps {
    items: any[]
}
const LanguageSwitch = () => (
    <IntlConsumer>
        {({ switchToEnglish, switchToArabic }) => (
            <React.Fragment>
                <DefaultButton
                    data-automation-id="test"
                    onClick={switchToEnglish}
                    className="lang-btn d-inline-block-ar"
                >
                    EN
            {/* <Image src={gbFlag} /> */}

                </DefaultButton>
                <DefaultButton
                    data-automation-id="test"
                    onClick={switchToArabic}
                    className="lang-btn d-inline-block-en"
                >
                    العربية
            {/* <Image src={saFlag} /> */}


                </DefaultButton>

            </React.Fragment>
        )}
    </IntlConsumer>
);
// let isMenuClased = true;
export class Header extends React.Component<any, any> {
    _cachingService: CachingService = new CachingService();
    constructor(props: IListGhostingExampleProps) {
        super(props);

        this.state = {

            showPanel: false,
            selectedItem: "",
            loggedInUser: this._cachingService.read('LoggedInUser'),
            selectedTheme: this._cachingService.readPersistant("ThemeColor") || "greenTheme",
        };
    }
    public render() {

        var loggedInUser_name = this._cachingService.readPersistant("Language") == 1 ? this.state.loggedInUser.name_Ar : this.state.loggedInUser.name_En;

        return (
            <div>
                <header className="cf inner-header">
                    <div className="header-flex-container">

                        <div className="logoCenter" >
                            <Image
                                src="/images/logo.png"
                                alt=""
                                width={320}
                                height={50}
                                className="hidden-sm"
                            />
                            <Image
                                src="/images/logo_sm.png"
                                alt=""
                                width={32}
                                height={50}
                                className="hidden-lg logo-sm-m center-sm-img"
                            />
                        </div>

                        <div className="setings">
                            {/* <LanguageSwitch /> */}

                            <div className="ms-Grid-col setings" style={{ margin: '28px 0' }}>
                                <i className="iconsmind-Bell" style={{ color: 'black', fontSize: 25 }} onClick={this._setShowPanel(true, "Notification")}></i>
                                {/* <i className="ms-Icon ms-Icon--Settings ms-Grid-col" aria-hidden="true" style={{ marginTop: 16, marginRight: 16 }} onClick={this._setShowPanel(true, "Settings")}></i>
                                <i className="ms-Icon ms-Icon--Help ms-Grid-col" aria-hidden="true" style={{ marginTop: 16, marginRight: 16 }} onClick={this._setShowPanel(true, "Help")}></i> */}
                                <Persona text={loggedInUser_name} className="personaStyle" size={PersonaSize.size40} onClick={this._setShowPanel(true, "Settings")} />

                            </div>
                        </div>
                        <div className="setings lang-btn-container">
                            <LanguageSwitch />
                        </div>
                        <i className="simple-icon-menu menuExpand" id="menu" onClick={this._setShowMenu.bind(this)}></i>
                    </div>
                </header>
                <Panel
                    className="panelStyle"
                    isOpen={this.state.showPanel}
                    onDismiss={this._setShowPanel(false, undefined)}
                    type={PanelType.smallFixedFar}
                    headerText={this.state.selectedItem}
                    onRenderFooterContent={this._onRenderFooterContent}
                    closeButtonAriaLabel="Close"
                    onRenderHeader={this._onReadnderHader}

                >

                </Panel>
            </div>
        )
    }

    private _setShowPanel(showPanel: boolean, type: any) {
        return (): void => {
            this.setState({ showPanel });
            this.setState({ selectedItem: type });

        }
    };
    private _logOut() {
        this._cachingService.emptyStorage();

        window.location.href = "/";
    }


    private _setShowMenu() {
        //debugger;
        // if (isMenuClased == true) {
        //     let shand2 = document.getElementsByClassName('layout-side-mav') as HTMLCollectionOf<HTMLElement>;

        //     if (shand2.length != 0) {
        //         shand2[0].style.display = "inline";
        //     }


        //     isMenuClased=false
        // } else {
        //     let shand2 = document.getElementsByClassName('layout-side-mav') as HTMLCollectionOf<HTMLElement>;

        //     if (shand2.length != 0) {
        //         shand2[0].style.display = "none";
        //     }


        //     isMenuClased=true
        // }
        let pageContainerRef = this.props.pageContainerRef.current;
        let sideRef = this.props.sideRef.current;

        if (pageContainerRef.classList.contains("menu-hidden")) {
            pageContainerRef.classList.remove("menu-hidden")
        } else if (!pageContainerRef.classList.contains("menu-hidden") && !pageContainerRef.classList.contains("full-menu")) {
            pageContainerRef.classList.add("menu-hidden")
        } else if (!pageContainerRef.classList.contains("menu-hidden") && pageContainerRef.classList.contains("full-menu")) {
            sideRef.closeSubMenu();
        }

        if (pageContainerRef.classList.contains("show-mobile-menu")) {
            pageContainerRef.classList.remove("show-mobile-menu")
            sideRef.closeSubMenu();
        } else {
            pageContainerRef.classList.add("show-mobile-menu")
        }

    }
    // private _setClaseMenu(): JSX.Element {
    //    debugger;
    //     return (
    //         <div>
    //             <h1>murad</h1>
    //         </div>
    //     )
    // }

    private _onRenderFooterContent = (): JSX.Element => {

        var loggedInUser_name = this._cachingService.readPersistant("Language") == 1 ? this.state.loggedInUser.name_Ar : this.state.loggedInUser.name_En;

        if (this.state.selectedItem == "Settings") {

            return (
                <div>

                    <Persona className="personaStyle" text={loggedInUser_name} secondaryText={this.state.loggedInUser.email} size={PersonaSize.size72} />
                    <ul className="profileStyle">
                        <SwatchColorPicker
                            columnCount={5}
                            selectedId={this.state.selectedTheme}
                            cellShape={'square'}
                            onColorChanged={this._onColorChanges.bind(this)}
                            colorCells={[
                                { id: 'greenTheme', label: 'green', color: '#576a3d' },
                                { id: 'blueTheme', label: 'blue', color: '#145388' },
                                { id: 'purpleTheme', label: 'purple', color: '#922c88' },
                                { id: 'lightGreenTheme', label: 'light green', color: '#74bb3f' }
                            ]}
                        />
                        <li><Link to="https://eur.delve.office.com/?u=c92890ee-a94c-48cb-9618-e21ab2a37758&v=work"><FormattedMessage id="Myprofile" /></Link></li>
                        <li><Link to="https://eur.delve.office.com/?u=c92890ee-a94c-48cb-9618-e21ab2a37758&v=work"><FormattedMessage id="Myaccount" /></Link></li>
                        <li><Link onClick={this._logOut.bind(this)}><FormattedMessage id="Signout" /></Link></li>

                    </ul>
                </div>

            );
        }
        if (this.state.selectedItem == "Help") {
            return (
                <div>

                    <TextField iconProps={{ iconName: 'Lightbulb' }} placeholder="Tell me what you want to do" />
                    <ul className="profileStyle">
                        <li><Link to="https://eur.delve.office.com/?u=c92890ee-a94c-48cb-9618-e21ab2a37758&v=work"><FormattedMessage id="Myprofile" /></Link></li>
                        <li><Link to="https://eur.delve.office.com/?u=c92890ee-a94c-48cb-9618-e21ab2a37758&v=work"><FormattedMessage id="Myaccount" /></Link></li>
                        <li><Link to="https://eur.delve.office.com/?u=c92890ee-a94c-48cb-9618-e21ab2a37758&v=work"><FormattedMessage id="Signout" /></Link></li>

                    </ul>
                </div>

            );
        }
        if (this.state.selectedItem == "Notification") {
            const { items } = this.props;

            return (

                <div>

                    <FocusZone direction={FocusZoneDirection.vertical}>
                        <div className="ms-ListGhostingExample-container" data-is-scrollable={true}>
                            <List items={items} onRenderCell={this._onRenderCell} />
                        </div>
                    </FocusZone>
                </div>

            );
        }
        return <div></div>
    };
    private _onRenderCell(item: any, index: number, isScrolling: boolean): JSX.Element {
        return (
            <div className="ms-ListGhostingExample-itemCell" data-is-focusable={true}>
                <Image
                    className="ms-ListGhostingExample-itemImage"
                    src={isScrolling ? undefined : item.thumbnail}
                    width={50}
                    height={50}
                    imageFit={ImageFit.cover}
                />
                <div className="ms-ListGhostingExample-itemContent">
                    <div className="ms-ListGhostingExample-itemName">{item.name}</div>
                    <div className="ms-ListGhostingExample-itemIndex">{`Item ${index}`}</div>
                </div>
            </div>
        );
    }

    private _onReadnderHader = (item: any): JSX.Element | null => {
        return (
            <h2 className="panel-header-text "><FormattedMessage id={item.headerText || "panel"} /></h2>
        )
    }

    private _onColorChanges(id: any) {
        this._cachingService.storePersistant("ThemeColor", id);
        window.location.reload();
    }
}