import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:sonnat/core/extensions/context_extension.dart';
import 'package:sonnat/core/extensions/string_extension.dart';
import 'package:sonnat/core/utils/app_constants.dart';
import 'package:sonnat/features/posts/widgets/filter_item_widget.dart';
import 'package:sonnat/features/posts/widgets/post_item_widget.dart';

class PostsScreen extends StatefulWidget {
  final String title;

  const PostsScreen({super.key, required this.title});

  @override
  State<PostsScreen> createState() => _PostsScreenState();
}

class _PostsScreenState extends State<PostsScreen> {
  final List<FilterItem> _filterList = [
    const FilterItem(selected: false, title: 'پر تکرارترین‌ها'),
    const FilterItem(selected: true, title: 'مشابه‌ها'),
    const FilterItem(selected: false, title: 'محبوبترین‌ها'),
    const FilterItem(selected: false, title: 'برای‌ شما'),
    const FilterItem(selected: false, title: 'محبوبترین‌ها'),
    const FilterItem(selected: false, title: 'پر تکرارترین‌ها'),
    const FilterItem(selected: true, title: 'مشابه‌ها'),
    const FilterItem(selected: false, title: 'محبوبترین‌ها'),
    const FilterItem(selected: false, title: 'برای‌ شما'),
    const FilterItem(selected: false, title: 'محبوبترین‌ها'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(height: context.height * 26 / AppConstants.instance.appHeight),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: context.width * 26 / AppConstants.instance.appWidth),
            child: Row(
              children: [
                GestureDetector(
                  onTap: () {},
                  child: SvgPicture.asset(
                    'ic_more'.svgPath,
                  ),
                ),
                SizedBox(width: context.width * 8 / AppConstants.instance.appWidth),
                GestureDetector(
                  onTap: () {},
                  child: SvgPicture.asset(
                    'ic_rounded_search'.svgPath,
                  ),
                ),
                const Spacer(),
                Text(
                  widget.title,
                  style: const TextStyle(
                    color: Color(0xff404966),
                    fontSize: 22,
                  ),
                ),
                const Spacer(),
                GestureDetector(
                  onTap: () {
                    Navigator.pop(context);
                  },
                  child: SvgPicture.asset(
                    'ic_back'.svgPath,
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: context.height * 35 / AppConstants.instance.appHeight),
          SizedBox(
            height: context.height * 31 / AppConstants.instance.appHeight,
            child: ListView.builder(
              padding: EdgeInsetsDirectional.only(start: context.width * 26 / AppConstants.instance.appWidth),
              itemBuilder: (context, index) {
                return FilterItemWidget(title: _filterList[index].title, selected: _filterList[index].selected);
              },
              itemCount: _filterList.length,
              scrollDirection: Axis.horizontal,
            ),
          ),
          SizedBox(height: context.height * 26 / AppConstants.instance.appHeight),
          Expanded(
            child: ListView.builder(
              itemBuilder: (context, index) {
                return const PostItemWidget();
              },
              itemCount: 10,
            ),
          )
        ],
      ),
    );
  }
}

class FilterItem {
  final bool selected;
  final String title;

  const FilterItem({required this.selected, required this.title});
}