import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';
import 'package:krow/features/earning/domain/bloc/earnings_bloc.dart';

class AnimatedSlider extends StatefulWidget {
  const AnimatedSlider({super.key});

  @override
  State<AnimatedSlider> createState() => _AnimatedSliderState();
}

class _AnimatedSliderState extends State<AnimatedSlider> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200, // Adjust the width as needed
      height: 36, // Adjust the height as needed
      decoration: BoxDecoration(
        color: Colors.blueGrey.shade400, // Background color
        borderRadius: BorderRadius.circular(18),
      ),
      child: Stack(
        children: [
          BlocBuilder<EarningsBloc, EarningsState>(
            builder: (context, state) {
              bool isThisWeekSelected =
                  state.balancePeriod == BalancePeriod.week;

              return AnimatedAlign(
                duration: const Duration(milliseconds: 150),
                alignment: isThisWeekSelected
                    ? Alignment.centerLeft
                    : Alignment.centerRight,
                child: Container(
                  width: 90,
                  margin: const EdgeInsets.all(4),
                  // Half the width of the container
                  height: 36,
                  decoration: BoxDecoration(
                    color: Colors.blueGrey.shade900, // Active slider color
                    borderRadius: BorderRadius.circular(14),
                  ),
                ),
              );
            },
          ),
          Row(
            children: [
              Expanded(
                child: GestureDetector(
                  onTap: () {
                    BlocProvider.of<EarningsBloc>(context)
                        .add(const EarningsSwitchBalancePeriodEvent(
                      period: BalancePeriod.week,
                    ));
                  },
                  child: Container(
                    color: Colors.transparent,
                    child: Center(
                      child: Text(
                        'this_week'.tr(),
                        style: AppTextStyles.bodySmallMed
                            .copyWith(color: AppColors.grayWhite),
                      ),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: GestureDetector(
                  onTap: () {
                    BlocProvider.of<EarningsBloc>(context)
                        .add(const EarningsSwitchBalancePeriodEvent(
                      period: BalancePeriod.month,
                    ));
                  },
                  child: Container(
                    color: Colors.transparent,
                    child: Center(
                      child: Text(
                        'this_month'.tr(),
                        style: AppTextStyles.bodySmallMed
                            .copyWith(color: AppColors.grayWhite),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
