import 'package:eatvio_app/core/theme/theme_helper.dart';
import 'package:eatvio_app/features/create_recipe/presentation/bloc/create_recipe_cubit/create_recipe_cubit.dart';
import 'package:eatvio_app/features/create_recipe/presentation/bloc/create_recipe_cubit/create_recipe_state.dart';
import 'package:eatvio_app/features/create_recipe/presentation/widgets/add_portion_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class IngredientsWidget extends StatefulWidget {
  const IngredientsWidget({super.key});

  @override
  State<IngredientsWidget> createState() => _IngredientsWidgetState();
}

class _IngredientsWidgetState extends State<IngredientsWidget> {
  late final CreateRecipeCubit createRecipeCubit;
  final nameController = TextEditingController();
  final gramsController = TextEditingController();
  final pcsController = TextEditingController();

  @override
  void initState() {
    super.initState();
    createRecipeCubit = context.read<CreateRecipeCubit>();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CreateRecipeCubit, CreateRecipeState>(
      builder: (BuildContext context, CreateRecipeState state) {
        return Material(
          borderRadius: BorderRadius.circular(12),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16),
                  child: Text(
                    'Ингредиенты ',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w600,
                      color: Color(0xFF323F4B),
                    ),
                  ),
                ),
                ReorderableListView(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  onReorder: (int oldIndex, int newIndex) {
                    setState(() {
                      if (oldIndex < newIndex) {
                        newIndex -= 1;
                      }
                    });
                    createRecipeCubit.replaceIngredientPosition(oldIndex, newIndex);
                  },
                  children: <Widget>[
                    for (int index = 0; index < state.entity.ingredients.length; index += 1)
                      ListTile(
                        contentPadding: const EdgeInsets.symmetric(horizontal: 16),
                        key: Key('$index'),
                        leading: Icon(
                          Icons.drag_handle_rounded,
                          color: Colors.grey.shade600,
                        ),
                        title: Text(state.entity.ingredients[index].name),
                        subtitle: Text('${state.entity.ingredients[index].portion} ${state.entity.ingredients[index].unit == 'gr' ? 'гр' : 'шт'}'),
                        trailing: IconButton(
                          onPressed: () {
                            createRecipeCubit.removeIngredient(index);
                          },
                          icon: Icon(
                            Icons.delete_outline_rounded,
                            color: Colors.grey.shade600,
                          ),
                        ),
                      ),
                  ],
                ),
                ListTile(
                  onTap: () {
                    nameController.clear();
                    gramsController.clear();
                    pcsController.clear();
                    _modalBottomSheet(
                      createRecipeCubit: createRecipeCubit,
                    );
                  },
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                  title: Text(
                    'Добавить ингредиент',
                    style: TextStyle(
                      color: appTheme.blueA400,
                    ),
                  ),
                  leading: Icon(
                    Icons.add_rounded,
                    color: appTheme.blueA400,
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  _modalBottomSheet({
    required CreateRecipeCubit createRecipeCubit,
    int? portionIndex,
    String? productNameControllerText,
    String? quantityControllerText,
  }) {
    return showModalBottomSheet(
      useRootNavigator: true,
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
      ),
      isScrollControlled: true,
      builder: (context) {
        return AddPortionWidget(
          createRecipeCubit: createRecipeCubit,
          portionIndex: portionIndex,
          productNameControllerText: productNameControllerText,
          quantityControllerText: quantityControllerText,
        );
      },
    );
  }
}