import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:tanami_app/core/styles/app_color.dart';

import 'bloc/toggle/toggle_bloc.dart';
import 'bloc/toggle/toggle_event.dart';
import 'bloc/toggle/toggle_state.dart';

class CustomToggle extends StatelessWidget {
  const CustomToggle({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ToggleBloc, ToggleState>(
      builder: (context, state) {
        bool isOn = state is ToggleOn;

        return GestureDetector(
          onTap: () {
            context.read<ToggleBloc>().add(ToggleSwitch());
          },
          child: Stack(
            children: [
              AnimatedContainer(
                duration: const Duration(milliseconds: 200),
                width: 60.0,
                height: 30.0,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15.0),
                  color: isOn
                      ? AppColor.selectedItemColor
                      : AppColor.darkGreyColor,
                ),
              ),
              AnimatedPositioned(
                duration: const Duration(milliseconds: 200),
                curve: Curves.easeIn,
                left: isOn ? 30.0 : 0.0,
                right: isOn ? 0.0 : 30.0,
                child: AnimatedSwitcher(
                  duration: const Duration(milliseconds: 200),
                  transitionBuilder:
                      (Widget child, Animation<double> animation) {
                    return ScaleTransition(scale: animation, child: child);
                  },
                  child: isOn
                      ? Container(
                          decoration: const BoxDecoration(
                            shape: BoxShape.circle,
                            boxShadow: [
                              BoxShadow(
                                color: AppColor.shadowColor,
                                spreadRadius: 1,
                                blurRadius: 5,
                                offset: Offset(0, 3),
                              ),
                            ],
                          ),
                          child: CircleAvatar(
                            backgroundColor: AppColor.plainWhite,
                            radius: 15,
                            child: Icon(Icons.circle,
                                color: AppColor.radioActiveColor,
                                size: 12.0,
                                key: UniqueKey()),
                          ),
                        )
                      : Container(
                          decoration: const BoxDecoration(
                            shape: BoxShape.circle,
                            boxShadow: [
                              BoxShadow(
                                color: AppColor.shadowColor,
                                spreadRadius: 1,
                                blurRadius: 5,
                                offset: Offset(0, 3),
                              ),
                            ],
                          ),
                          child: CircleAvatar(
                            backgroundColor: AppColor.plainWhite,
                            radius: 15,
                            child: Icon(Icons.remove,
                                color: AppColor.darkGreyColor,
                                size: 20.0,
                                key: UniqueKey()),
                          ),
                        ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}