import 'package:didvan/config/design_config.dart';
import 'package:didvan/pages/home/home_state.dart';
import 'package:didvan/pages/home/widgets/category_item.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class CategoriesRow1 extends StatelessWidget {
  final bool isColapsed;
  const CategoriesRow1({Key? key, required this.isColapsed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final MediaQueryData d = MediaQuery.of(context);
    return AnimatedPositioned(
      duration: DesignConfig.defaultAnimationDuration,
      top: isColapsed ? 12 : 176 + d.padding.top,
      left: isColapsed ? -d.size.width : 0,
      right: isColapsed ? d.size.width : 0,
      child: Row(
        children: context
            .read<HomeState>()
            .categories
            .sublist(0, 3)
            .map(
              (category) => Expanded(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 6),
                  child: CategoryItem(
                    title: category.title,
                    asset: category.asset,
                    isColapsed: isColapsed,
                  ),
                ),
              ),
            )
            .toList(),
      ),
    );
  }
}

class CategoriesRow2 extends StatelessWidget {
  const CategoriesRow2({
    Key? key,
    required this.isColapsed,
  }) : super(key: key);

  final bool isColapsed;

  @override
  Widget build(BuildContext context) {
    final MediaQueryData d = MediaQuery.of(context);
    return AnimatedPositioned(
      duration: DesignConfig.defaultAnimationDuration,
      top: isColapsed ? -60 : 300 + d.padding.top,
      left: isColapsed ? -80 : 0,
      right: isColapsed ? 124 : 0,
      child: Row(
        children: context
            .read<HomeState>()
            .categories
            .sublist(3, 6)
            .map(
              (category) => Expanded(
                child: CategoryItem(
                  title: category.title,
                  asset: category.asset,
                  isColapsed: isColapsed,
                ),
              ),
            )
            .toList(),
      ),
    );
  }
}