import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/entities/album.entity.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/extensions/theme_extensions.dart';
import 'package:immich_mobile/repositories/album_media.repository.dart';
import 'package:immich_mobile/widgets/common/immich_thumbnail.dart';

@RoutePage()
class AlbumPreviewPage extends HookConsumerWidget {
  final Album album;
  const AlbumPreviewPage({super.key, required this.album});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final assets = useState<List<Asset>>([]);

    getAssetsInAlbum() async {
      assets.value = await ref.read(albumMediaRepositoryProvider).getAssets(album.localId!);
    }

    useEffect(() {
      getAssetsInAlbum();
      return null;
    }, []);

    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: Column(
          children: [
            Text(album.name, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
            Padding(
              padding: const EdgeInsets.only(top: 4.0),
              child: Text(
                "ID ${album.id}",
                style: TextStyle(
                  fontSize: 10,
                  color: context.colorScheme.onSurfaceSecondary,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
        leading: IconButton(onPressed: () => context.maybePop(), icon: const Icon(Icons.arrow_back_ios_new_rounded)),
      ),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 5,
          crossAxisSpacing: 2,
          mainAxisSpacing: 2,
        ),
        itemCount: assets.value.length,
        itemBuilder: (context, index) {
          return ImmichThumbnail(asset: assets.value[index], width: 100, height: 100);
        },
      ),
    );
  }
}
