import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class CustomMediaTabBar extends StatefulWidget {
  final int currentIndex;
  final ValueChanged<int> onTap;
  final List<String> categories;
  final List<String> iconPaths;
  final String? customIndicatorPath;

  const CustomMediaTabBar({
    super.key,
    required this.currentIndex,
    required this.onTap,
    required this.categories,
    required this.iconPaths,
    this.customIndicatorPath,
  });

  @override
  State<CustomMediaTabBar> createState() => _CustomMediaTabBarState();
}

class _CustomMediaTabBarState extends State<CustomMediaTabBar> {

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 80,
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surface,
      ),
      child: Stack(
        children: [
          Row(
            children: List.generate(widget.categories.length, (index) {
              final isSelected = index == widget.currentIndex;
              return Expanded(
                child: GestureDetector(
                  onTap: () => widget.onTap(index),
                  child: AnimatedContainer(
                    duration: const Duration(milliseconds: 200),
                    curve: Curves.easeInOut,
                    height: 80,
                    color: Colors.transparent,
                    transform: Matrix4.translationValues(0, isSelected ? -8.0 : 0.0, 0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        AnimatedContainer(
                          duration: const Duration(milliseconds: 200),
                          padding: const EdgeInsets.all(8),
                          child: SvgPicture.asset(
                            widget.iconPaths[index],
                            width: 24,
                            height: 24,
                            colorFilter: ColorFilter.mode(
                              isSelected
                                  ? Theme.of(context).colorScheme.primary
                                  : const Color.fromARGB(255, 102, 102, 102),
                              BlendMode.srcIn,
                            ),
                          ),
                        ),
                        const SizedBox(height: 4),
                        AnimatedContainer(
                          duration: const Duration(milliseconds: 200),
                          child: Text(
                            widget.categories[index],
                            textAlign: TextAlign.center,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: Theme.of(context).textTheme.bodySmall!.copyWith(
                              color: isSelected
                                  ? Theme.of(context).colorScheme.primary
                                  : const Color.fromARGB(255, 102, 102, 102),
                              fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              );
            }),
          ),
          
          Positioned(
            bottom: -1,
            left: 0,
            right: 0,
            height: 12,
            child: Row(
              children: List.generate(widget.categories.length, (index) {
                return Expanded(
                  child: Center(
                    child: AnimatedContainer(
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.easeInOut,
                      child: index == widget.currentIndex
                          ? (widget.customIndicatorPath != null
                              ? SvgPicture.asset(
                                  "lib/assets/icons/Union.svg",
                                  width: 100,
                                  height: 12,
                                  colorFilter: ColorFilter.mode(
                                    Theme.of(context).colorScheme.primary,
                                    BlendMode.srcIn,
                                  ),
                                )
                              : Container(
                                  width: 100,
                                  height: 12,
                                  decoration: BoxDecoration(
                                    color: Theme.of(context).colorScheme.primary,
                                    borderRadius: BorderRadius.circular(6),
                                  ),
                                ))
                          : null,
                    ),
                  ),
                );
              }),
            ),
          ),
        ],
      ),
    );
  }
}