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.separated(
        itemCount: widget.list.length,
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        padding: EdgeInsetsDirectional.only(start: 16.toScreenWidth, end: 16),
        separatorBuilder: (cxt, index) => 8.width,
        itemBuilder: (context, index) => Container(
          // margin: EdgeInsets.symmetric(horizontal: 4.toScreenWidth),
          padding: EdgeInsets.symmetric(vertical: 8.toScreenHeight, horizontal: 12.toScreenWidth),
          alignment: Alignment.center,
          decoration: ShapeDecoration(
            color: AppColor.background(context),
            shadows: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 14, offset: const Offset(0, 0), spreadRadius: 0)],
            shape: RoundedRectangleBorder(
              side: BorderSide(width: 1, color: _selectedIndex == index ? AppColor.primary10 : AppColor.border2Color(context)),
              borderRadius: BorderRadius.circular(6),
            ),
          ),
          child: widget.list[index].tinyFont(context).custom(color: _selectedIndex == index ? AppColor.primary10 : AppColor.filterButtonTextColor(context)),
        ).onPress(() {
          setState(() {
            _selectedIndex = index;
          });
          widget.callBackFunction.call(index);
        }),
      ),
    );
  }
}
