import 'package:flutter/material.dart';
import 'package:grpc/grpc_web.dart';
import 'package:softplayer_web/api/third_party/chartmuseum.dart';
import 'package:softplayer_web/components/catalog_card.dart';
import 'package:softplayer_web/components/menubar.dart';
import 'package:softplayer_web/models/catalog_entry.dart';

class CatalogPage extends StatefulWidget {
  final GrpcWebClientChannel grpcChannel;
  const CatalogPage({
    super.key,
    required this.grpcChannel,
  });
  final String title = "catalog";

  @override
  State<CatalogPage> createState() => _CatalogPage();
}

class _CatalogPage extends State<CatalogPage> {
  late Future<List<HelmChart>> helmChart;
  @override
  void initState() {
    super.initState();
    helmChart = fetchCharts();
  }

  final List<CatalogEntry> catalog = [
    CatalogEntry(
        name: "openvpn",
        description: "you know what I mean",
        logoUrl:
            "https://upload.wikimedia.org/wikipedia/commons/f/f5/OpenVPN_logo.svg"),
    CatalogEntry(
        name: "openvpn",
        description: "you know what I mean",
        logoUrl:
            "https://upload.wikimedia.org/wikipedia/commons/f/f5/OpenVPN_logo.svg"),
  ];
  @override
  Widget build(BuildContext context) {
    print(helmChart);
    return SelectionArea(
        child: Scaffold(
      appBar: const MenuPanel(tab: TabName.catalog),
      body: Container(
        margin: const EdgeInsets.all(14),
        child: Container(
            child: Row(children: <Widget>[
          const SizedBox(
              width: 200,
              child: Card(
                  child: Column(
                children: <Widget>[Text("Filter")],
              ))),
          Flexible(
            child: Column(
              children: <Widget>[
                const TextField(
                  decoration: InputDecoration(
                    icon: Icon(Icons.search),
                    labelText: "Search",
                  ),
                  autofocus: true,
                ),
                CatalogCard(data: catalog),
                FutureBuilder(
                    future: helmChart,
                    builder: (context, snapshot) {
                      print(snapshot);
                      if (snapshot.hasData) {
                        return Text(snapshot.data!.first.name);
                      } else if (snapshot.hasError) {
                        return SelectableText('${snapshot.error}');
                      }
                      return const CircularProgressIndicator();
                    }),
              ],
            ),
          )
        ])),
      ),
    ));
  }
}