import 'package:flutter/material.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';

import '../../new_views/app_style/app_color.dart';

class HorizontalListWidget extends StatefulWidget {
  const HorizontalListWidget({Key? key, required this.list, required this.callBackFunction}) : super(key: key);
  final List<String> list;
  final Function(int index) callBackFunction;

  @override
  State<HorizontalListWidget> createState() => _HorizontalListWidgetState();
}

class _HorizontalListWidgetState extends State<HorizontalListWidget> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 35.toScreenHeight,
      child: ListView.builder(
        itemCount: widget.list.length,
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        padding: EdgeInsetsDirectional.only(start: 16.toScreenWidth, end: 16),
        itemBuilder: (context, index) => Container(
          margin: EdgeInsets.symmetric(horizontal: 4.toScreenWidth),
          padding: EdgeInsets.symmetric(horizontal: 20.toScreenWidth),
          alignment: Alignment.center,
          decoration: ShapeDecoration(
            color: _selectedIndex == index ? Colors.transparent : AppColor.selectedButtonColor(context),
            shape: RoundedRectangleBorder(
              side: _selectedIndex == index ? BorderSide(width: 2, color: (context.isDark ? AppColor.backgroundLight : AppColor.backgroundDark)) : BorderSide.none,
              borderRadius: BorderRadius.circular(7),
            ),
          ),
          child: (widget.list[index]).tinyFont(context).custom(color: AppColor.filterButtonTextColor(context)),
        ).onPress(() {
          setState(() {
            _selectedIndex = index;
          });
          widget.callBackFunction?.call(index);
        }),
      ),
    );
  }
}