import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:krow_domain/krow_domain.dart';
import '../../blocs/client_create_order_bloc.dart';
import '../../blocs/client_create_order_state.dart';
import '../../navigation/client_create_order_navigator.dart';
import '../../ui_entities/order_type_ui_metadata.dart';
import '../order_type_card.dart';

/// Helper to map keys to localized strings.
String _getTranslation({required String key}) {
  if (key == 'client_create_order.types.rapid') {
    return t.client_create_order.types.rapid;
  } else if (key == 'client_create_order.types.rapid_desc') {
    return t.client_create_order.types.rapid_desc;
  } else if (key == 'client_create_order.types.one_time') {
    return t.client_create_order.types.one_time;
  } else if (key == 'client_create_order.types.one_time_desc') {
    return t.client_create_order.types.one_time_desc;
  } else if (key == 'client_create_order.types.recurring') {
    return t.client_create_order.types.recurring;
  } else if (key == 'client_create_order.types.recurring_desc') {
    return t.client_create_order.types.recurring_desc;
  } else if (key == 'client_create_order.types.permanent') {
    return t.client_create_order.types.permanent;
  } else if (key == 'client_create_order.types.permanent_desc') {
    return t.client_create_order.types.permanent_desc;
  }
  return key;
}

/// The main content of the Create Order page.
class CreateOrderView extends StatelessWidget {
  /// Creates a [CreateOrderView].
  const CreateOrderView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: UiColors.bgPrimary,
      appBar: UiAppBar(
        title: t.client_create_order.title,
        onLeadingPressed: () => Modular.to.pop(),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: UiConstants.space5,
            vertical: UiConstants.space6,
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(bottom: UiConstants.space6),
                child: Text(
                  t.client_create_order.section_title,
                  style: UiTypography.footnote1m.copyWith(
                    color: UiColors.textDescription,
                    letterSpacing: 0.5,
                  ),
                ),
              ),
              Expanded(
                child: BlocBuilder<ClientCreateOrderBloc, ClientCreateOrderState>(
                  builder:
                      (BuildContext context, ClientCreateOrderState state) {
                        if (state is ClientCreateOrderLoadSuccess) {
                          return GridView.builder(
                            gridDelegate:
                                const SliverGridDelegateWithFixedCrossAxisCount(
                                  crossAxisCount: 2,
                                  mainAxisSpacing: UiConstants.space4,
                                  crossAxisSpacing: UiConstants.space4,
                                  childAspectRatio: 1,
                                ),
                            itemCount: state.orderTypes.length,
                            itemBuilder: (BuildContext context, int index) {
                              final OrderType type = state.orderTypes[index];
                              final OrderTypeUiMetadata ui =
                                  OrderTypeUiMetadata.fromId(id: type.id);

                              return OrderTypeCard(
                                icon: ui.icon,
                                title: _getTranslation(key: type.titleKey),
                                description: _getTranslation(
                                  key: type.descriptionKey,
                                ),
                                backgroundColor: ui.backgroundColor,
                                borderColor: ui.borderColor,
                                iconBackgroundColor: ui.iconBackgroundColor,
                                iconColor: ui.iconColor,
                                textColor: ui.textColor,
                                descriptionColor: ui.descriptionColor,
                                onTap: () {
                                  switch (type.id) {
                                    case 'rapid':
                                      Modular.to.pushRapidOrder();
                                      break;
                                    case 'one-time':
                                      Modular.to.pushOneTimeOrder();
                                      break;
                                    case 'recurring':
                                      Modular.to.pushRecurringOrder();
                                      break;
                                    case 'permanent':
                                      Modular.to.pushPermanentOrder();
                                      break;
                                  }
                                },
                              );
                            },
                          );
                        }
                        return const Center(child: CircularProgressIndicator());
                      },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
