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

class SearchAppbar extends StatelessWidget implements PreferredSizeWidget {
  const SearchAppbar({
    super.key,
    required this.onTapToSearch,
    required this.onTapToCategory,
    this.title,
    this.titleStyle,
    this.searchIcon,
    this.groupIcon,
    this.iconWitch,
    this.showDown,
  });

  final Function() onTapToSearch;
  final Function() onTapToCategory;
  final String? title;
  final TextStyle? titleStyle;
  final String? searchIcon;
  final String? groupIcon;
  final double? iconWitch;
  final bool? showDown;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 24).w,
      width: double.infinity,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            padding: const EdgeInsets.all(5).w,
            decoration: BoxDecoration(
              color: Colors.black87,
              borderRadius: BorderRadius.circular(10).w,
            ),
            child: GestureDetector(
              onTap: onTapToCategory,
              child: Image.asset(
                width: iconWitch ?? 20.w,
                color: Colors.white,
                groupIcon ?? Assets.iconCategory,
              ),
            ),
          ),
          title == null
              ? Container()
              : Row(
                  children: [
                    showDown ?? true
                        ? Image.asset(
                            width: 24.w,
                            Assets.iconDown,
                          )
                        : Container(),
                    Stack(
                      clipBehavior: Clip.none,
                      children: [
                        Positioned(
                          bottom: 6.5.w,
                          right: 0,
                          child: Image.asset(
                            width: 30.w,
                            Assets.iconNameBackground1,
                          ),
                        ),
                        Positioned(
                          top: 3.w,
                          right: -8.w,
                          child: Image.asset(
                            width: 8.w,
                            Assets.iconNameBackground2,
                          ),
                        ),
                        Text(
                          title ?? "",
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: titleStyle ??
                              TextStyle(
                                color: Colors.white,
                                fontSize: 20.sp,
                                fontWeight: FontWeight.w500,
                              ),
                        )
                      ],
                    ),
                    10.horizontalSpace,
                    showDown ?? true
                        ? Image.asset(
                            width: 24.w,
                            Assets.iconDown,
                          )
                        : Container(),
                  ],
                ),
          Container(
            padding: const EdgeInsets.all(5).w,
            decoration: BoxDecoration(
              color: Colors.black87,
              borderRadius: BorderRadius.circular(10).w,
            ),
            child: GestureDetector(
              onTap: onTapToSearch,
              child: Image.asset(
                width: iconWitch ?? 20.w,
                color: Colors.white,
                searchIcon ?? Assets.iconSearch,
              ),
            ),
          ),
        ],
      ),
    );
    ;
  }

  @override
  Size get preferredSize =>
      Size.fromHeight(ScreenUtil().statusBarHeight + kToolbarHeight);
}