import 'package:flutter/material.dart';

class MyToggle extends StatelessWidget {
  const MyToggle({
    super.key,
    required this.isOn,
    required this.onTap,
    this.knobTextWhenOn = '',
    this.paddingWhenOn = const EdgeInsets.all(4.0),
    this.knobTextWhenOff = '',
    this.pathColorWhenOn = Colors.green,
    this.pathColorWhenOff = const Color(0xffD9D9D9),
    required this.knobTextStyleWhenOn,
    required this.knobTextStyleWhenOff,
  });

  final bool isOn;
  final String knobTextWhenOn;
  final EdgeInsets paddingWhenOn;
  final String knobTextWhenOff;
  final Color pathColorWhenOn;
  final Color pathColorWhenOff;
  final void Function()? onTap;
  final TextStyle knobTextStyleWhenOn;
  final TextStyle knobTextStyleWhenOff;

  @override
  Widget build(BuildContext context) {
    final bgPath = DecoratedBox(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(100),
        color: isOn ? pathColorWhenOn : pathColorWhenOff,
      ),
      child: const SizedBox(
        height: 15,
        width: 40,
      ),
    );
    final knobText = Text(
      isOn ? knobTextWhenOn : knobTextWhenOff,
      style: TextStyle(
        color: isOn ? knobTextStyleWhenOn.color : knobTextStyleWhenOff.color,
        fontWeight: isOn ? knobTextStyleWhenOn.fontWeight : knobTextStyleWhenOff.fontWeight,
      ),
    );
    final shouldShowKnobText = (isOn && knobTextWhenOn.isNotEmpty) ||
        (!isOn && knobTextWhenOff.isNotEmpty);
    final circle = CircleAvatar(
      backgroundColor: const Color(0xff898C81),
      radius: 21 / 2,
      child: CircleAvatar(
        backgroundColor: Colors.white,
        radius: 18 / 2,
        child: shouldShowKnobText
            ? FittedBox(
                child: Padding(
                  padding: isOn ? paddingWhenOn : const EdgeInsets.all(4.0),
                  child: knobText,
                ),
              )
            : null,
      ),
    );
    final stack = Stack(
      clipBehavior: Clip.none,
      alignment: Alignment.centerLeft,
      children: [
        bgPath,
        AnimatedPositioned(
          height: 21,
          left: isOn ? 0 : 21,
          duration: kThemeAnimationDuration,
          child: circle,
        ),
      ],
    );
    final btn = GestureDetector(
      onTap: onTap,
      child: Material(
        color: Colors.transparent,
        child: Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 12,
            vertical: 16,
          ),
          child: stack,
        ),
      ),
    );
    return btn;
  }
}