_MySliverAppBar

class _MySliverAppBar extends ConsumerWidget {
  const _MySliverAppBar({
    this.goalData,
    required this.titleEditingController,
    required this.detailsEditingController,
  });

  final GoalData? goalData;
  final TextEditingController titleEditingController;
  final TextEditingController detailsEditingController;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final colorScheme = Theme.of(context).colorScheme;
    final goalCategoryProvider = ref.watch(selectedGoalCategoryProvider);
    final tagIds = ref.watch(selectedTagIdsProvider);

    final categoryColorScheme = getGoalColorScheme(
      Theme.of(context).brightness,
      goalCategoryProvider,
    );

    final buttonStyle = ButtonStyle(
      backgroundColor: WidgetStateProperty.all(
        colorScheme.primaryContainer.withAlpha(200),
      ),
      foregroundColor: WidgetStateProperty.all(
        colorScheme.onSecondaryContainer,
      ),
    );

    final items = GoalCategory.values.map((category) {
      return DropdownMenuItem<GoalCategory>(
        value: category,
        child: Text(
          category.title,
          style: TextStyle(color: colorScheme.onSecondaryContainer),
          softWrap: true,
          maxLines: 2,
        ),
      );
    }).toList();

    void saveGoal() {
      final details = detailsEditingController.text.isEmpty
          ? null
          : detailsEditingController.text;

      if (goalData == null) {
        GoalsRepository().createGoal(
          category: goalCategoryProvider,
          title: titleEditingController.text,
          details: details,
          tagIds: tagIds,
        );
        return;
      }

      GoalsRepository().updateGoal(
        goalToUpdate: goalData!,
        category: goalCategoryProvider,
        title: titleEditingController.text,
        details: details,
        tagIds: tagIds,
      );
    }

    return SliverAppBar(
      expandedHeight: 200,
      floating: true,
      pinned: true,
      automaticallyImplyLeading: false,
      backgroundColor: categoryColorScheme.surface,
      bottom: AppBar(
        backgroundColor: Colors.transparent,
        centerTitle: false,
        leading: IconButton(
          style: buttonStyle,
          onPressed: () {
            context.pop();
          },
          icon: const Icon(Icons.arrow_back_ios_new),
        ),
        title: Container(
          padding: const EdgeInsets.symmetric(
            horizontal: 8,
            vertical: 8,
          ),
          decoration: BoxDecoration(
            color: colorScheme.primaryContainer.withAlpha(200),
            borderRadius: BorderRadius.circular(16),
          ),
          child: DropdownButton<GoalCategory>(
            isDense: true,
            isExpanded: true,
            value: goalCategoryProvider,
            dropdownColor: categoryColorScheme.surface,
            style: TextStyle(
              color: categoryColorScheme.onSecondaryContainer,
            ),
            items: items,
            onChanged: (newValue) {
              ref
                  .read(selectedGoalCategoryProvider.notifier)
                  .setGoalCategory(newValue!);
            },
          ),
        ),
        actions: [
          TextButton(
            style: buttonStyle,
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                saveGoal();
                context.pop();
              }
            },
            child: Text("Save"),
          ),
        ],
      ),
      flexibleSpace: FlexibleSpaceBar(
        centerTitle: false,
        background: Image.asset(
          goalCategoryProvider.imagePath,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}