import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_app_bar.dart';
import 'package:krow/features/profile/faq/domain/bloc/faq_bloc.dart';

@RoutePage()
class FaqScreen extends StatelessWidget implements AutoRouteWrapper {
  const FaqScreen({super.key});

  @override
  Widget wrappedRoute(BuildContext context) {
    return BlocProvider(
      create: (context) => FaqBloc()..add(const InitializeFAQ()),
      child: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: KwAppBar(
        titleText: 'FAQ',
        showNotification: true,
      ),
      body: CustomScrollView(
        primary: false,
        slivers: [
          SliverPadding(
            padding: const EdgeInsets.all(16),
            sliver: SliverList.list(
              children: [
                Text(
                  'faq_description'.tr(),
                  style: AppTextStyles.bodyMediumReg.copyWith(
                    color: AppColors.blackGray,
                  ),
                  textAlign: TextAlign.start,
                ),
                const Gap(8),
              ],
            ),
          ),
          BlocBuilder<FaqBloc, FaqState>(
            buildWhen: (previous, current) =>
                previous.entries != current.entries,
            builder: (context, state) {
              return SliverPadding(
                padding: const EdgeInsets.symmetric(horizontal: 16),
                sliver: SliverList.separated(
                  itemCount: state.entries.length,
                  separatorBuilder: (context, index) =>
                      const SizedBox(height: 8),
                  itemBuilder: (context, index) {
                    return ExpansionTile(
                      collapsedBackgroundColor: AppColors.graySecondaryFrame,
                      backgroundColor: AppColors.graySecondaryFrame,
                      shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(8)),
                      ),
                      collapsedShape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(8)),
                      ),
                      iconColor: Colors.black,
                      collapsedIconColor: AppColors.grayStroke,
                      childrenPadding: const EdgeInsets.only(
                        left: 12,
                        right: 12,
                        bottom: 16,
                      ),
                      title: Text(
                        state.entries[index].question,
                        style: AppTextStyles.bodyLargeMed,
                      ),
                      children: [
                        Text(
                          state.entries[index].answer,
                          style: AppTextStyles.bodySmallReg.copyWith(
                            color: AppColors.blackGray,
                          ),
                        )
                      ],
                    );
                  },
                ),
              );
            },
          )
        ],
      ),
    );
  }
}
