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

class CatalogPage extends StatefulWidget {
  const CatalogPage({
    super.key,
  });
  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 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();
                  }),
            ],
          ),
        )
      ])),
    );
  }
}