import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      showPerformanceOverlay: true,
      debugShowCheckedModeBanner: false,
      scrollBehavior: CustomScrollBehavior(),
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const CategoriesPage(),
    );
  }
}

class CategoriesPage extends StatelessWidget {
  const CategoriesPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Categories',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        centerTitle: false,
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 16),
        child: ListView.builder(
          itemCount: categories.length,
          itemBuilder: (context, index) {
            return Padding(
              padding: EdgeInsets.only(bottom: 16),
              child: CategoryTile(data: categories[index]),
            );
          },
        ),
      ),
    );
  }
}

class CategoryTile extends StatelessWidget {
  const CategoryTile({super.key, required this.data});

  final CategoryData data;

  @override
  Widget build(BuildContext context) {
    var textTheme = Theme.of(context).textTheme;
    var colorScheme = Theme.of(context).colorScheme;
    var size = (MediaQuery.of(context).size.width - 12) / 3;
    size = size * 2;

    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.only(left: 16.0, right: 32),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                data.categoryName,
                style: textTheme.titleLarge?.copyWith(
                  fontWeight: FontWeight.bold,
                ),
              ),
              Text(
                'All',
                style: textTheme.titleMedium?.copyWith(
                  color: colorScheme.primary,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
        SizedBox(height: 8),

        SizedBox(
          height: size,
          child: GridView.builder(
            padding: EdgeInsets.only(left: 16),
            scrollDirection: Axis.horizontal,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 12.0,
              mainAxisSpacing: 12.0,
              childAspectRatio: 1.0,
            ),
            itemCount: data.puzzles.length,
            itemBuilder: (context, index) {
              return TestCard(data: data.puzzles[index]);
            },
          ),
        ),
      ],
    );
  }
}

class TestCard extends StatefulWidget {
  const TestCard({super.key, required this.data});

  final PictureData data;

  @override
  State<TestCard> createState() => _TestCardState();
}

class _TestCardState extends State<TestCard> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/white_rect.png"),
          centerSlice: Rect.fromLTWH(16, 16, 16, 16),
          fit: BoxFit.contain,
          alignment: Alignment.center,
          scale: 3,
          filterQuality: FilterQuality.none,
          colorFilter: ColorFilter.mode(
            cardSurfaceColor(context),
            BlendMode.modulate,
          ),
        ),
      ),
      child: Stack(
        fit: StackFit.expand,
        children: [
          FractionallySizedBox(
            widthFactor: 0.7,
            heightFactor: 0.7,
            child: Image.asset(
              widget.data.pictureUrl,
              fit: BoxFit.cover,
              filterQuality: FilterQuality.none,
            ),
          ),
        ],
      ),
    );
  }
}

Color cardSurfaceColor(BuildContext context) {
  var colorScheme = Theme.of(context).colorScheme;
  return ElevationOverlay.applySurfaceTint(
    colorScheme.surfaceContainerLow,
    colorScheme.surfaceTint,
    0,
  );
}

class PictureData {
  final String pictureUrl;

  PictureData({required this.pictureUrl});
}

class CategoryData {
  final String categoryName;
  final List<PictureData> puzzles;

  CategoryData({required this.categoryName, required this.puzzles});
}

List<CategoryData> categories = [
  CategoryData(categoryName: "Books", puzzles: defaults),
  CategoryData(categoryName: "Animals", puzzles: defaults),
  CategoryData(categoryName: "Home", puzzles: defaults),
  CategoryData(categoryName: "Nature", puzzles: defaults),
  CategoryData(categoryName: "World", puzzles: defaults),
];

List<PictureData> defaults = List.generate(32, (index) {
  final urls = [
    'assets/images/kitty.jpeg',
    'assets/images/banana.jpg',
    'assets/images/food.jpg',
  ];
  String url = urls[index % urls.length];

  var data = PictureData(pictureUrl: url);
  return data;
});

class CustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    PointerDeviceKind.trackpad,
    PointerDeviceKind.stylus,
    PointerDeviceKind.unknown,
  };
}