import 'package:flutter/cupertino.dart';
import 'package:please_pay_me/theme/theme.dart';
import 'package:please_pay_me/ui/ui.dart';
import 'package:please_pay_me_widgetbook/knobs/common_knobs.dart';
import 'package:please_pay_me_widgetbook/support/preview.dart';
import 'package:widgetbook/widgetbook.dart';

const _icons = <IconData>[
  CupertinoIcons.house_fill,
  CupertinoIcons.cart_fill,
  CupertinoIcons.bag_fill,
  CupertinoIcons.money_rubl_circle_fill,
  CupertinoIcons.chart_pie_fill,
  CupertinoIcons.calendar,
  CupertinoIcons.bell_fill,
  CupertinoIcons.gear_alt_fill,
  CupertinoIcons.person_fill,
  CupertinoIcons.creditcard_fill,
];

WidgetbookComponent iconsComponent() {
  return WidgetbookComponent(
    name: 'Icons',
    useCases: [
      WidgetbookUseCase(
        name: 'Glyphs',
        builder: (context) {
          final size = knobDouble(context, label: 'Size', initialValue: 24, min: 12, max: 48);
          final tint = knobTint(context);
          return IosPreview(
            child: Wrap(
              spacing: AppSpacing.s5,
              runSpacing: AppSpacing.s5,
              alignment: WrapAlignment.center,
              children: [
                for (final icon in _icons) AppIcon(icon, size: size, color: tint),
              ],
            ),
          );
        },
      ),
      WidgetbookUseCase(
        name: 'Badges',
        builder: (context) {
          return IosPreview(
            child: Wrap(
              spacing: AppSpacing.s4,
              runSpacing: AppSpacing.s4,
              alignment: WrapAlignment.center,
              children: [
                for (final (index, icon) in _icons.indexed)
                  AppIconBadge(
                    icon: icon,
                    color: switch (index % 4) {
                      0 => AppColors.accent,
                      1 => AppColors.systemRed,
                      2 => AppColors.systemOrange,
                      _ => AppColors.systemGray,
                    },
                  ),
              ],
            ),
          );
        },
      ),
    ],
  );
}