import 'package:concierge/data/remote/models/product.dart';
import 'package:concierge/presentation/screens/product_details/widgets/product_details_app_bar.dart';
import 'package:concierge/presentation/widgets/bevelled_app_bar.dart';
import 'package:concierge/presentation/widgets/padded_column.dart';
import 'package:concierge/presentation/widgets/toggle_checkmark.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:concierge/presentation/screens/product_details/bloc/product_details_cubit.dart';
import 'package:concierge/presentation/screens/product_details/bloc/product_details_state.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:gap/gap.dart';

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

  @override
  Widget build(BuildContext context) {
    final cubit = context.read<ProductDetailsCubit>();
    return BlocBuilder<ProductDetailsCubit, ProductDetailsState>(
      builder: (context, state) {
        return MultiBlocListener(
          listeners: [
            BlocListener<ProductDetailsCubit, ProductDetailsState>(
              listenWhen: (prev, curr) => prev.isLoading && curr.error.isError,
              listener: (context, state) {},
            ),
          ],
          child: Scaffold(
            bottomNavigationBar: SafeArea(child: ProductDetailsAppBar()),
            backgroundColor: Colors.white,
            body: Stack(
              alignment: Alignment.topCenter,
              children: [
                Builder(
                  builder: (context) {
                    if (state.isLoading || state.product == null) {
                      return Center(child: CircularProgressIndicator());
                    }
                    if (state.error.isError) {
                      return Center(child: Text(state.error.toString()));
                    }
                    return SingleChildScrollView(
                      child: Column(
                        children: [
                          Image.network(
                            state.requireProduct.images.first.url,
                            fit: BoxFit.fitHeight,
                            height: 400,
                            width: double.infinity,
                          ),
                          PaddedColumn(
                            padding: EdgeInsets.symmetric(horizontal: 16),
                            children: [
                              const Gap(8),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Row(
                                    children: [
                                      const Icon(Icons.watch_later_outlined),
                                      const Gap(5),
                                      Text(state.requireProduct.estimatedDeliveryTime),
                                    ],
                                  ),
                                  IconButton(
                                    onPressed: () {},
                                    icon: const Icon(Icons.info_outline),
                                  ),
                                ],
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(state.requireProduct.title),
                                  Text("${state.requireProduct.price} kr."),
                                ],
                              ),
                              const Gap(8),
                              Text(state.requireProduct.subTitle),
                              const Gap(16),
                              Divider(color: Colors.grey),
                              const Gap(16),
                              Html(data: state.requireProduct.body),
                              Gap(48),
                              ..._buildVariants(context, state.requireProduct),
                              Gap(100),
                            ],
                          ),
                        ],
                      ),
                    );
                  },
                ),
                BevelledAppBar(),
              ],
            ),
          ),
        );
      },
    );
  }

  Iterable<Widget> _buildVariants(BuildContext context, Product product) sync* {
    final cubit = context.read<ProductDetailsCubit>();
    for (final option in product.options) {
      yield Text(option.name, style: TextStyle(fontSize: 20));
      yield Divider(color: Colors.grey);
      for (final answer in option.answers) {
        yield InkWell(
          onTap: () {
            cubit.onVariantSelected(option.id, answer.id);
          },
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 12.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(answer.name),
                Container(
                  height: 20,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.black,
                    border: Border.all(color: Colors.grey),
                  ),
                  child: ToggleCheckmark(
                    isSelected: answer.id == cubit.state.selectedVariant[option.id],
                  ),
                ),
              ],
            ),
          ),
        );
        yield Divider(color: Colors.grey);
      }
    }
  }
}