import 'package:didvan/config/design_config.dart';
import 'package:didvan/views/home/radar/radar_state.dart';
import 'package:didvan/views/home/radar/widgets/category_item.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class CategoriesRow1 extends StatelessWidget {
  const CategoriesRow1({Key? key}) : super(key: key);

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

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

  @override
  Widget build(BuildContext context) {
    final state = context.read<RadarState>();
    final isColapsed = state.isColapsed || state.searching || state.filtering;
    final MediaQueryData d = MediaQuery.of(context);
    return AnimatedPositioned(
      curve: Curves.easeIn,
      duration: DesignConfig.mediumAnimationDuration,
      top: isColapsed ? 12 : 176 + d.padding.top,
      left: isColapsed ? -d.size.width : 0,
      right: isColapsed ? d.size.width : 0,
      child: Row(
        children: context
            .read<RadarState>()
            .categories
            .sublist(3, 6)
            .map(
              (category) => Expanded(
                child: CategoryItem(
                  category: category,
                  isColapsed: isColapsed,
                ),
              ),
            )
            .toList(),
      ),
    );
  }
}
