import 'package:eatvio_app/core/theme/custom_text_style.dart';
import 'package:eatvio_app/core/theme/theme_helper.dart';
import 'package:eatvio_app/core/widgets/custom_divider.dart';
import 'package:eatvio_app/core/widgets/custom_outlined_button.dart';
import 'package:eatvio_app/core/widgets/loader.dart';
import 'package:eatvio_app/features/notifications/presentation/notifications_cubit/notifications_cubit.dart';
import 'package:eatvio_app/features/notifications/presentation/notifications_cubit/notifications_state.dart';
import 'package:eatvio_app/features/notifications/presentation/widgets/notification_widget.dart';
import 'package:eatvio_app/generated/l10n.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
    final s = S.of(context);
    return BlocBuilder<NotificationsCubit, NotificationsState>(
      builder: (BuildContext context, NotificationsState state) {
        return Scaffold(
          backgroundColor: appTheme.gray100,
          appBar: AppBar(
            title: const Text('Уведомления'),
          ),
          body: state is NotificationsStateLoaded
              ? Stack(children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0),
                    child: Container(
                      padding: const EdgeInsets.only(top: 16),
                      decoration: BoxDecoration(
                        color: appTheme.whiteA700,
                        borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(12),
                          topRight: Radius.circular(12),
                        ),
                      ),
                      child: state.isLoading
                          ? const Center(child: Loader())
                          : CustomScrollView(
                              slivers: [
                                SliverList.separated(
                                  separatorBuilder: (context, index) => const Padding(
                                    padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                                    child: CustomDivider(),
                                  ),
                                  itemBuilder: (context, index) {
                                    return Padding(
                                      padding: const EdgeInsets.symmetric(horizontal: 16),
                                      child: NotificationWidget(
                                        notification: state.notifications[index],
                                      ),
                                    );
                                  },
                                  itemCount: state.notifications.length,
                                )
                              ],
                            ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Padding(
                      padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16),
                      child: CustomOutlinedButton(
                        text: s.markAsRead,
                        height: 52,
                        buttonTextStyle: TextStyles.textMSemibold.copyWith(color: appTheme.whiteA700),
                        buttonStyle:
                            ButtonStyle(side: const WidgetStatePropertyAll(BorderSide.none), backgroundColor: WidgetStatePropertyAll(appTheme.blueA400)),
                        onPressed: () async {
                          context.read<NotificationsCubit>().markNotificationsAsRead();
                        },
                      ),
                    ),
                  )
                ])
              : const Placeholder(),
        );
      },
    );
  }
}