import 'dart:convert';

import 'package:flutter/material.dart';
import '../navigation/video_feed.dart';
import '../screen_loading.dart';

import '../api/api.dart';
import '../types/tag.dart';

class CategorieScreen extends StatefulWidget {
  const CategorieScreen({Key? key}) : super(key: key);

  @override
  State<CategorieScreen> createState() => _CategorieScreenState();
}

class _CategorieScreenState extends State<CategorieScreen> {
  late Future<List<Tag>> _categories;

  Future<List<Tag>> loadVideoData() async {
    final data = await API.query("tags", "getAllTags", {});

    final d = (jsonDecode(data) ?? []) as List<dynamic>;
    final tags = d.map((e) => Tag.fromJson(e)).toList(growable: false);
    return tags;
  }

  @override
  void initState() {
    super.initState();
    _categories = loadVideoData();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _categories,
      builder: (context, AsyncSnapshot<List<Tag>> snapshot) {
        if (snapshot.connectionState != ConnectionState.done) {
          return ScreenLoading();
        }

        if (snapshot.hasError) {
          return Text("Error");
        } else if (snapshot.hasData) {
          return Padding(
            padding: EdgeInsets.all(5),
            child: Wrap(
              spacing: 5,
              runSpacing: 5,
              alignment: WrapAlignment.start,
              children: snapshot.data!
                  .map((e) => ElevatedButton(
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => Scaffold(
                                appBar: AppBar(title: Text(e.tagName)),
                                body: VideoFeed(tag: e),
                              ),
                            ),
                          );
                        },
                        style: ElevatedButton.styleFrom(
                            primary: Color(0x6a94a6ff)),
                        child: SizedBox(
                          child: Center(child: Text(e.tagName)),
                          height: 100,
                          width: 100,
                        ),
                      ))
                  .toList(growable: false),
            ),
          );
        } else {
          return ScreenLoading();
        }
      },
    );
  }
}