import 'package:common/localization/l10n_utils.dart';
import 'package:concierge/data/remote/models/area_category.dart';
import 'package:concierge/data/remote/models/area_details.dart';
import 'package:concierge/data/remote/models/area_sub_category.dart';
import 'package:concierge/domain/models/data_state.dart';
import 'package:concierge/presentation/screens/hotel_overview_page/widgets/cart_app_bar.dart';
import 'package:concierge/presentation/screens/hotel_overview_page/widgets/product_list_tile.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:concierge/presentation/screens/hotel_overview_page/bloc/hotel_overview_page_cubit.dart';
import 'package:concierge/presentation/screens/hotel_overview_page/bloc/hotel_overview_page_state.dart';
import 'package:concierge/presentation/widgets/hotel_overview_app_bar.dart';
import 'package:gap/gap.dart';

class HotelOverviewPageScreen extends StatelessWidget {
  const HotelOverviewPageScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<HotelOverviewPageCubit, HotelOverviewPageState>(
      builder: (context, state) {
        final cubit = context.read<HotelOverviewPageCubit>();
        return MultiBlocListener(
          listeners: [
            BlocListener<HotelOverviewPageCubit, HotelOverviewPageState>(
              listenWhen: (prev, curr) =>
                  prev.isLoading && !curr.isLoading && curr.errorMessage.isNotEmpty,
              listener: (context, state) {},
            ),
          ],
          child: Scaffold(
            bottomSheet: CartAppBar(),
            appBar: HotelOverviewAppBar(
              areas: state.property?.areas ?? const [],
              selectedAreaId: state.selectedAreaId,
              onAreaPressed: (area) {
                cubit.selectAreaId(area.id);
              },
            ),
            body: Builder(
              builder: (context) {
                final areaState = cubit.areaState;
                if (areaState is Loading || areaState is Initial) {
                  return Center(child: CircularProgressIndicator());
                }
                if (areaState is Failure) {
                  return Center(child: Text((areaState).error.toString()));
                }
                final areaDetails = (areaState as Success<AreaDetails>).data;
                if (areaDetails.categories.isEmpty) {
                  return Center(child: Text(context.strings.there_are_no_products_in_this_area));
                }
                final widgets = buildCategories(context, areaDetails.categories).toList();
                return ListView.builder(
                  itemCount: widgets.length,
                  itemBuilder: (context, index) {
                    final widget = widgets[index];
                    return widget;
                  },
                );
              },
            ),
          ),
        );
      },
    );
  }

  Iterable<Widget> buildCategories(
    BuildContext context,
    List<AreaCategory> categories,
  ) sync* {
    yield Gap(24);
    for (final category in categories) {
      yield Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Text(
          category.name,
          style: TextStyle(fontSize: 24),
        ),
      );
      yield Gap(12);
      yield* buildSubCategories(
        context,
        category.subCategories,
      );
      yield Gap(100);
    }
  }

  Iterable<Widget> buildSubCategories(
    BuildContext context,
    List<AreaSubCategory> subCategories,
  ) sync* {
    for (final category in subCategories) {
      final products = category.products;
      yield Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Text(
          category.name,
          style: TextStyle(fontSize: 16),
        ),
      );
      yield Gap(8);
      yield SizedBox(
        height: 320,
        child: ListView.builder(
          itemCount: products.length,
          scrollDirection: Axis.horizontal,
          padding: EdgeInsets.symmetric(horizontal: 12),
          itemBuilder: (context, index) {
            final pid = products[index];
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 4.0),
              child: ProductListTile(productId: pid),
            );
          },
        ),
      );
      yield Gap(24);
    }
  }
}