import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:skeletonizer/skeletonizer.dart';
import 'package:sliver_tools/sliver_tools.dart';
import 'package:spotube/collections/fake.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/image/universal_image.dart';
import 'package:spotube/components/titlebar/titlebar.dart';
import 'package:spotube/extensions/context.dart';
import 'package:spotube/models/metadata/metadata.dart';
import 'package:spotube/provider/metadata_plugin/core/user.dart';
import 'package:url_launcher/url_launcher_string.dart';
import 'package:auto_route/auto_route.dart';

@RoutePage()
class ProfilePage extends HookConsumerWidget {
  static const name = "profile";

  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context, ref) {
    final me = ref.watch(metadataPluginUserProvider);
    final meData = me.asData?.value ?? FakeData.user;

    // final userProperties = useMemoized(
    //   () => {
    //     context.l10n.email: meData.email ?? "N/A",
    //     context.l10n.profile_followers:
    //         meData.followers?.total.toString() ?? "N/A",
    //     context.l10n.birthday: meData.birthdate ?? context.l10n.not_born,
    //     context.l10n.country: markets
    //         .firstWhere((market) => market.$1 == meData.country)
    //         .$2,
    //     context.l10n.subscription: meData.product ?? context.l10n.hacker,
    //   },
    //   [meData],
    // );

    return SafeArea(
      child: Scaffold(
        headers: [
          TitleBar(
            title: Text(context.l10n.profile),
          )
        ],
        child: Skeletonizer(
          enabled: me.isLoading,
          child: CustomScrollView(
            slivers: [
              SliverToBoxAdapter(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(600),
                      child: UniversalImage(
                        path: meData.images.asUrlString(
                          index: 1,
                          placeholder: ImagePlaceholder.artist,
                        ),
                        width: 300,
                        height: 300,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ],
                ),
              ),
              const SliverGap(10),
              SliverToBoxAdapter(
                child: Text(
                  meData.name,
                  textAlign: TextAlign.center,
                ).h4(),
              ),
              const SliverGap(20),
              SliverCrossAxisConstrained(
                maxCrossAxisExtent: 500,
                child: SliverToBoxAdapter(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Button.text(
                        leading: const Icon(SpotubeIcons.edit),
                        onPressed: () {
                          launchUrlString(
                            meData.externalUri,
                            mode: LaunchMode.externalApplication,
                          );
                        },
                        child: Text(context.l10n.edit),
                      ),
                    ],
                  ),
                ),
              ),
              // SliverCrossAxisConstrained(
              //   maxCrossAxisExtent: 500,
              //   child: SliverToBoxAdapter(
              //     child: Card(
              //       child: Padding(
              //         padding: const EdgeInsets.all(8.0),
              //         child: Table(
              //           columnWidths: const {
              //             0: FixedTableSize(120),
              //           },
              //           defaultRowHeight: const FixedTableSize(40),
              //           rows: [
              //             for (final MapEntry(:key, :value)
              //                 in userProperties.entries)
              //               TableRow(
              //                 cells: [
              //                   TableCell(
              //                     child: Padding(
              //                       padding: const EdgeInsets.all(6),
              //                       child: Text(key).large(),
              //                     ),
              //                   ),
              //                   TableCell(
              //                     child: Padding(
              //                       padding: const EdgeInsets.all(6),
              //                       child: Text(value),
              //                     ),
              //                   ),
              //                 ],
              //               )
              //           ],
              //         ),
              //       ),
              //     ),
              //   ),
              // ),
              const SliverGap(200),
            ],
          ),
        ),
      ),
    );
  }
}