import 'package:flutter/material.dart';
import 'package:niogu_app/core/components/modal_outlet_bottom.dart';
import 'package:niogu_app/core/constants/app_color.dart';
import 'package:niogu_app/core/constants/app_font_size.dart';
import 'package:sizer/sizer.dart';

class AppBarWithTab extends StatelessWidget implements PreferredSizeWidget {
  final String hintText;
  final Color searchIconColor;
  final bool canPop;
  final VoidCallback? onPop;
  final bool showSwitchOutlet;
  final bool showNotifIcon;
  final FocusNode searchFocusNode;
  final TabController tabController;
  final Function(int)? onTap;
  final Function(String)? onSearchChanged;
  final List<Widget> tabs;

  const AppBarWithTab({
    super.key,
    required this.hintText,
    required this.searchIconColor,
    this.canPop = false,
    this.onPop,
    this.showSwitchOutlet = true,
    this.showNotifIcon = true,
    required this.searchFocusNode,
    required this.tabController,
    required this.onTap,
    required this.onSearchChanged,
    required this.tabs,
  });

  @override
  Size get preferredSize {
    return Size.fromHeight(10.h + 8.h);
  }

  @override
  Widget build(BuildContext context) {
    final bool isTablet = 100.w >= 600;
    const greyColor = Color(0xFFF5F5F5);

    return AppBar(
      backgroundColor: Colors.white,
      surfaceTintColor: Colors.white,
      elevation: 0,
      titleSpacing: 0,
      toolbarHeight: 10.h,
      automaticallyImplyLeading: false,
      title: Padding(
        padding: EdgeInsets.symmetric(horizontal: 4.w),
        child: Row(
          children: [
            if (canPop) ...[
              Center(
                child: Material(
                  color: Colors.transparent,
                  type: MaterialType.canvas,
                  child: InkWell(
                    onTap: onPop,
                    borderRadius: BorderRadius.circular(2.5.w),
                    child: Container(
                      width: 10.w,
                      height: 10.w,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all(color: Colors.grey.shade200),
                        borderRadius: BorderRadius.circular(2.5.w),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withOpacity(0.05),
                            blurRadius: 5,
                            offset: const Offset(0, 2),
                          ),
                        ],
                      ),
                      child: Icon(
                        Icons.arrow_back_ios_new_rounded,
                        color: Colors.black87,
                        size: 5.w,
                      ),
                    ),
                  ),
                ),
              ),
              SizedBox(width: 3.w),
            ] else if (showSwitchOutlet) ...[
              IconButton(
                onPressed: () {
                  showModalBottomSheet(
                    context: context,
                    useRootNavigator: true,
                    isScrollControlled: true,
                    constraints: const BoxConstraints(
                      maxWidth: double.infinity,
                    ),
                    builder: (context) => const ModalOutletBottom(),
                  );
                },
                icon: Icon(
                  Icons.keyboard_arrow_down_rounded,
                  color: AppColor.primaryColor,
                  size: 7.w,
                ),
                padding: EdgeInsets.zero,
                constraints: const BoxConstraints(),
              ),
              SizedBox(width: 3.w),
            ],

            Expanded(
              child: Container(
                height: 6.h,
                padding: isTablet
                    ? EdgeInsets.symmetric(vertical: 1.h, horizontal: 2.w)
                    : EdgeInsets.zero,
                decoration: BoxDecoration(
                  color: greyColor,
                  borderRadius: BorderRadius.circular(2.5.w),
                ),
                child: TextField(
                  focusNode: searchFocusNode,
                  onChanged: onSearchChanged,
                  textAlignVertical: TextAlignVertical.center,
                  style: TextStyle(
                    color: Colors.black87,
                    fontSize: isTablet
                        ? AppFontSize.medium.sp
                        : AppFontSize.small.sp,
                  ),
                  decoration: InputDecoration(
                    hintText: hintText,
                    hintStyle: TextStyle(
                      color: searchIconColor,
                      fontSize: isTablet
                          ? AppFontSize.medium.sp
                          : AppFontSize.small.sp,
                    ),
                    prefixIcon: Icon(
                      Icons.search,
                      color: searchIconColor,
                      size: 5.w,
                    ),
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.zero,
                    isDense: true,
                  ),
                ),
              ),
            ),

            /** Notification
            if (showNotifIcon) ...[
              SizedBox(width: 3.w),
              Stack(
                children: [
                  IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.notifications_outlined,
                      color: AppColor.primaryColor,
                      size: 7.w,
                    ),
                    padding: EdgeInsets.zero,
                  ),
                  Positioned(
                    right: isTablet
                        ? 10
                        : 100.w > 360
                        ? 12.5
                        : 15,
                    top: isTablet
                        ? 10
                        : 100.w > 360
                        ? 12.5
                        : 15,
                    child: Container(
                      padding: EdgeInsets.all(0.5.w),
                      decoration: const BoxDecoration(
                        color: Colors.red,
                        shape: BoxShape.circle,
                      ),
                      constraints: BoxConstraints(
                        minWidth: 2.5.w,
                        minHeight: 2.5.w,
                      ),
                    ),
                  ),
                ],
              ),
            ],
            */
          ],
        ),
      ),
      bottom: PreferredSize(
        preferredSize: Size.fromHeight(8.h),
        child: Container(
          height: 6.h,
          margin: EdgeInsets.fromLTRB(4.w, 0, 4.w, 1.5.h),
          decoration: BoxDecoration(
            color: greyColor,
            borderRadius: BorderRadius.circular(2.5.w),
          ),
          child: TabBar(
            onTap: onTap,
            controller: tabController,
            indicator: BoxDecoration(
              color: AppColor.primaryColor,
              borderRadius: BorderRadius.circular(2.05.w),
              boxShadow: [
                BoxShadow(
                  color: AppColor.primaryColor.withOpacity(0.3),
                  blurRadius: 4,
                  offset: const Offset(0, 2),
                ),
              ],
            ),
            indicatorSize: TabBarIndicatorSize.tab,
            dividerColor: Colors.transparent,
            labelColor: Colors.white,
            unselectedLabelColor: Colors.grey[600],
            labelStyle: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: AppFontSize.medium.sp,
            ),
            padding: EdgeInsets.all(1.w),
            tabs: tabs,
          ),
        ),
      ),
    );
  }
}
