import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../services/providers/recipe_provider.dart';
import '../../widgets/ingredient_bottomsheet.dart';

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

  @override
  State<IngredientsPage> createState() => _IngredientsPageState();
}

class _IngredientsPageState extends State<IngredientsPage> {
  late RecipeProvider _recipeProvider;

  @override
  Widget build(BuildContext context) {
    _recipeProvider = context.watch<RecipeProvider>();

    return Stack(
      children: [
        ListView.separated(
          padding: const EdgeInsets.only(bottom: 88),
          itemCount: _recipeProvider.recipe.ingredients.length,
          itemBuilder: _ingredientListBuilder,
          separatorBuilder: (context, index) => const Divider(),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 16, right: 16),
            child: FloatingActionButton(
              onPressed: _openIngredientBottomSheet,
              child: const Icon(Icons.add),
            ),
          ),
        ),
      ],
    );
  }

  void _openIngredientBottomSheet() {
    showModalBottomSheet(
      context: context,
      builder: (context) => IngredientBottomsheet(
        onSubmitted: _recipeProvider.addIngredient,
      ),
    );
  }

  Widget? _ingredientListBuilder(BuildContext context, int index) {
    final ingredient = _recipeProvider.recipe.ingredients.elementAt(index);

    return ListTile(
      contentPadding: EdgeInsets.zero,
      title: Text(ingredient.ingredient.title),
      subtitle: ingredient.optional ? const Text('optional') : null,
      trailing: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            ingredient.amount.toString(),
            style: Theme.of(context)
                .textTheme
                .bodyLarge!
                .copyWith(color: Theme.of(context).colorScheme.onSurface),
          ),
          const Padding(padding: EdgeInsets.symmetric(horizontal: 2)),
          Text(
            ingredient.unit.name,
            style: Theme.of(context)
                .textTheme
                .bodyLarge!
                .copyWith(color: Theme.of(context).colorScheme.onSurface),
          ),
          const Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
          SizedBox(
            width: 30,
            height: 30,
            child: IconButton(
              padding: EdgeInsets.zero,
              onPressed: () => _recipeProvider.removeIngredient(ingredient),
              icon: const Icon(Icons.delete),
            ),
          ),
        ],
      ),
    );
  }
}