import 'package:flutter/material.dart';
import 'package:rasadyar_core/core.dart';

class ListItem extends StatelessWidget {
  const ListItem({
    super.key,
    required this.index,
    required this.child,
    required this.secondChild,
    required this.labelColor,
    required this.labelIcon,
    required this.onTap,
    required this.selected,
    this.labelIconColor = AppColor.mediumGreyDarkHover,
  });

  final int index;
  final Widget child;
  final Widget secondChild;
  final Color labelColor;
  final String labelIcon;
  final Color? labelIconColor;
  final VoidCallback onTap;
  final bool selected;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: Get.width,
        margin: const EdgeInsets.fromLTRB(0, 0, 10, 0),
        decoration: BoxDecoration(
          color: labelColor,
          borderRadius: BorderRadius.circular(8),
          border: Border.all(width: 1, color: AppColor.lightGreyNormalHover),
        ),
        child: AnimatedSize(
          duration: Duration(milliseconds: 400),
          alignment: Alignment.center,
          child: Stack(
            clipBehavior: Clip.none,
            alignment: Alignment.centerRight,
            children: [
              AnimatedSize(
                duration: Duration(milliseconds: 300),
                child: Container(
                  width: Get.width - 30,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Colors.transparent,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Row(
                    children: [
                      Expanded(
                        child: AnimatedCrossFade(
                          alignment: Alignment.center,
                          firstChild: Container(
                            height: 75,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.only(
                                bottomLeft: Radius.zero,
                                bottomRight: Radius.circular(8),
                                topLeft: Radius.zero,
                                topRight: Radius.circular(8),
                              ),
                            ),
                            clipBehavior: Clip.antiAlias,
                            child: child,
                          ),
                          secondChild: Container(
                            padding: EdgeInsets.fromLTRB(8, 12, 14, 12),
                            clipBehavior: Clip.antiAlias,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: secondChild,
                          ),
                          crossFadeState: selected
                              ? CrossFadeState.showSecond
                              : CrossFadeState.showFirst,
                          duration: Duration(milliseconds: 300),
                        ),
                      ),
                      Container(
                        width: 20,
                        child: Center(
                          child: SvgGenImage.vec(labelIcon).svg(
                            width: 16.w,
                            height: 16.h,
                            colorFilter: ColorFilter.mode(labelColor, BlendMode.srcIn),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),

              Positioned(
                right: -12,
                child: Container(
                  width: index < 999 ? 24 : null,
                  height: index < 999 ? 24 : null,
                  padding: EdgeInsets.all(2),
                  decoration: BoxDecoration(
                    color: AppColor.greenLightHover,
                    borderRadius: BorderRadius.circular(4),
                    border: Border.all(width: 0.50, color: AppColor.greenDarkActive),
                  ),
                  alignment: Alignment.center,
                  child: Text(
                    (index + 1).toString(),
                    style: AppFonts.yekan12.copyWith(color: Colors.black),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
