import 'package:flutter/material.dart';
import 'package:hoshan/ui/theme/colors.dart';
import 'package:hoshan/ui/theme/text.dart';
import 'package:hoshan/ui/widgets/components/animations/animated_visibility.dart';

class AnimatedSettingContainer extends StatefulWidget {
  final String title;
  final IconData icon;
  final List<Widget> childrens;
  const AnimatedSettingContainer(
      {super.key,
      required this.title,
      required this.icon,
      required this.childrens});

  @override
  State<AnimatedSettingContainer> createState() =>
      _AnimatedSettingContainerState();
}

class _AnimatedSettingContainerState extends State<AnimatedSettingContainer> {
  final ValueNotifier<bool> show = ValueNotifier(false);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        show.value = !show.value;
      },
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 18),
        decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.surface,
            border: Border.all(color: AppColors.gray.defaultShade),
            borderRadius: BorderRadius.circular(18)),
        child: ValueListenableBuilder(
          valueListenable: show,
          builder: (context, isVisible, child) => Column(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Icon(
                    isVisible ? Icons.minimize : Icons.add,
                    size: 18,
                    color: AppColors.secondryColor.defaultShade,
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                  Expanded(
                    child: Text(
                      widget.title,
                      style: AppTextStyles.body4.copyWith(
                          color: Theme.of(context).colorScheme.onSurface),
                      textDirection: TextDirection.rtl,
                    ),
                  ),
                ],
              ),
              AnimatedVisibility(
                  isVisible: isVisible,
                  duration: const Duration(milliseconds: 300),
                  child: Column(
                    children: widget.childrens,
                  ))
            ],
          ),
        ),
      ),
    );
  }
}