// WSHeader.tsx 
import React, { Component } from 'react';
import "./WDHeader.css";
import IWDHeaderState from './IWDHeaderState'; 
import IWDHeaderProps from './IWDHeaderProps';
import defaultValue from "./WDHeaderState.json";
import WDWidgetBase from "@widgets/WDWidgetBase/WDWidgetBase";

export default class WDHeader extends WDWidgetBase<IWDHeaderProps, IWDHeaderState>{

  constructor(props: any) {
    super(props, defaultValue);
    if (this.manualInitState) {
      this.state = {
        ...this.state,
        title: this.props.title ?? "",
        subTitle: this.props.subTitle ?? "",
        user: this.props.user ?? ""
      }
    }
  }

  renderContent(){

    return(
      <div className="WDHeader fixed-top d-flex justify-content-between align-items-center px-2">
        <div className="d-flex align-items-center">
            <div className="logo"></div>
            <h2 className="text-white">
                &nbsp;&nbsp;{this.state.title}
                <small>{this.state.subTitle !== "" ? ` (${this.state.subTitle})` : ``}</small>
            </h2>
        </div>
        {this.state.user !== "" &&
            <span className="text-white d-flex align-items-center">
                <i className="fas fa-user"></i>
                &nbsp;&nbsp;{this.state.user}&nbsp;&nbsp;
                <i className="fas fa-sign-out-alt" onClick={() => this.event('Logout')}></i>
            </span>
        }
    </div>
    );
  }
}
