import 'package:flutter_svg/svg.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:oc_front/core/sections/header/header.dart';
import 'package:oc_front/core/services/auth.service.dart';
import 'package:oc_front/core/services/router.dart';
import 'package:oc_front/main.dart';
import 'package:flutter/material.dart';
import 'package:oc_front/pages/catalog.dart';

class HeaderMenuWidget extends StatefulWidget{
  HeaderMenuWidget (): super(key: HeaderConstants.getKey());
  @override HeaderMenuWidgetState createState() => HeaderMenuWidgetState();
}
class HeaderMenuWidgetState extends State<HeaderMenuWidget> {
  @override Widget build(BuildContext context) {
    return Container( 
        width: getWidth(context),
        height: 50,
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(bottom: BorderSide(color: midColor))
        ),
        child: Stack(children: [  
          AppRouter.currentRoute.factory.searchFill() ? Container() : Positioned( top: 0, left: 30, 
            child: InkWell( onTap: () {
              CatalogFactory.key.currentState?.widget.isSearch = true;
              CatalogFactory.key.currentState?.widget.items = [];
              AppRouter.zones.first.go(context, {});
              AppRouter.zones.first.factory.getKey().currentState?.setState(() {});
              HeaderConstants.headerKey.currentState?.setState(() {});
            }, 
            child: Wrap( alignment: WrapAlignment.center, children: [ 
              SvgPicture.asset("assets/images/icon.svg", width: 70, height: 70, semanticsLabel: 'OpenCloud Logo'),
              Container( height: 50, alignment: Alignment.centerLeft, margin: const EdgeInsets.only(left: 20),
                child: Text(AppRouter.currentRoute.label ?? "Where am I ?", style: TextStyle( color: Colors.grey)))
          ]))),
          Padding( padding: const EdgeInsets.only(left: 50), 
          child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, 
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Center(child: Text("hello \"${AuthService.getUsername() ?? ""}\"", style: const TextStyle(color: Colors.grey, fontSize: 15))),
              Padding(padding: const EdgeInsets.only(top: 5, bottom: 5, right: 50, left: 20), 
              child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, 
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Tooltip( message: "logout", child:  Padding(padding: const EdgeInsets.only(left: 10), 
                    child: IconButton(
                          icon: const Icon(FontAwesomeIcons.powerOff),
                          onPressed: () async { 
                            await AuthService.logout();
                            mainKey?.currentState?.setState(() {});
                          },
                      )
              )),
            ]
          ))
        ])
      )])
    );
  } 
}