import 'package:dating_touchme_app/generated/assets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class HomeAppbar extends StatefulWidget {

  final List<String> topNav;
  final void Function(int) changeNav;
  final Widget right;
  final int? activeIndex;
  const HomeAppbar({super.key, required this.topNav, required this.changeNav, this.right = const SizedBox(), this.activeIndex});

  @override
  State<HomeAppbar> createState() => _HomeAppbarState();
}

class _HomeAppbarState extends State<HomeAppbar> {

  int get active => widget.activeIndex ?? _internalActive;
  int _internalActive = 0;

  @override
  Widget build(BuildContext context) {
    final currentActive = widget.activeIndex ?? _internalActive;
    return Container(
      padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
      color: Colors.transparent,
      child: Stack(
        children: [
          Container(
            height: ScreenUtil().setWidth(54),
            padding: EdgeInsets.symmetric(horizontal: ScreenUtil().setWidth(17)),
            child: Stack(
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ...widget.topNav.asMap().entries.map((entry){
                      return InkWell(
                        onTap: (){
                          if (widget.activeIndex == null) {
                            _internalActive = entry.key;
                          }
                          widget.changeNav(entry.key);
                          setState(() {

                          });
                        },
                        child: Container(
                          margin: EdgeInsets.symmetric(horizontal: ScreenUtil().setWidth(13)),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                entry.value,
                                style: TextStyle(
                                    fontSize: currentActive == entry.key ? 19 : 17,
                                    color: const Color.fromRGBO(51, 51, 51, 1),
                                    fontWeight: currentActive == entry.key ? FontWeight.w600 : FontWeight.w400
                                ),
                              ),
                              SizedBox(height: ScreenUtil().setWidth(4),),
                              if(currentActive == entry.key) Image.asset(
                                Assets.imagesTabChangeIcon,
                                width: 20,
                              )
                            ],
                          ),
                        ),
                      );
                    }),


                  ],
                )
              ],
            ),
          ),
          Positioned(
            right: 0,
            top: 0,
            bottom: 0,
            child: Center(
              child: widget.right,
            ),
          )
        ],
      ),
    );
  }
}