import 'package:didvan/config/design_config.dart';
import 'package:didvan/models/category.dart';
import 'package:didvan/views/widgets/category_item.dart';
import 'package:flutter/material.dart';

class CategoriesRow1 extends StatelessWidget {
  final List<CategoryData> categories;
  final bool isColapsed;
  final double topPadding;
  final double rightPadding;
  final void Function(CategoryData data) onSelected;
  const CategoriesRow1({
    Key? key,
    required this.categories,
    required this.isColapsed,
    required this.onSelected,
    required this.topPadding,
    required this.rightPadding,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final MediaQueryData d = MediaQuery.of(context);
    return AnimatedPositioned(
      curve: Curves.easeIn,
      duration: DesignConfig.mediumAnimationDuration,
      top: isColapsed ? -60 : topPadding + d.padding.top,
      left: isColapsed ? -rightPadding : 0,
      right: isColapsed ? rightPadding : 0,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 40),
        child: Row(
          children: categories
              .sublist(0, 3)
              .map(
                (category) => Expanded(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 6),
                    child: CategoryItem(
                      category: category,
                      isColapsed: isColapsed,
                      onSelected: () => onSelected(category),
                    ),
                  ),
                ),
              )
              .toList(),
        ),
      ),
    );
  }
}

class CategoriesRow2 extends StatelessWidget {
  final List<CategoryData> categories;
  final bool isColapsed;
  final void Function(CategoryData data) onSelected;

  const CategoriesRow2({
    Key? key,
    required this.categories,
    required this.isColapsed,
    required this.onSelected,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final MediaQueryData d = MediaQuery.of(context);
    return AnimatedPositioned(
      curve: Curves.easeIn,
      duration: DesignConfig.mediumAnimationDuration,
      top: isColapsed ? 12 : 92 + d.padding.top,
      left: isColapsed ? -d.size.width : 0,
      right: isColapsed ? d.size.width : 0,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 40),
        child: Row(
          children: categories
              .sublist(3, 6)
              .map(
                (category) => Expanded(
                  child: CategoryItem(
                    category: category,
                    onSelected: () => onSelected(category),
                    isColapsed: isColapsed,
                  ),
                ),
              )
              .toList(),
        ),
      ),
    );
  }
}