import 'package:didvan/config/theme_data.dart';
import 'package:didvan/models/enums.dart';
import 'package:didvan/models/view/app_bar_data.dart';
import 'package:didvan/views/customize_category/customize_category_state.dart';
import 'package:didvan/views/customize_category/widgets/customize_category_checkbox.dart';
import 'package:didvan/views/widgets/didvan/scaffold.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../config/design_config.dart';
import '../../constants/assets.dart';
import '../widgets/didvan/button.dart';
import '../widgets/shimmer_placeholder.dart';
import '../widgets/state_handlers/empty_state.dart';
import '../widgets/state_handlers/sliver_state_handler.dart';

class FavoritesStep extends StatefulWidget {
  final Map<String, dynamic> pageData;

  const FavoritesStep({super.key, required this.pageData});

  @override
  State<FavoritesStep> createState() => _FavoritesStepState();
}

class _FavoritesStepState extends State<FavoritesStep> {
  late CustomizeCategoryState state;

  @override
  void initState() {
    super.initState();
    state = context.read<CustomizeCategoryState>();
    if (widget.pageData['toTimer'] != null) {
      state.toTimer = widget.pageData['toTimer'];
    }

    Future.delayed(
      Duration.zero,
      () => state.getFavourites(),
    );
  }

  @override
  Widget build(BuildContext context) {
    state = context.read<CustomizeCategoryState>();

    return Material(
      child: Stack(
        children: [
          DidvanScaffold(
            appBarData: state.toTimer
                ? null
                : AppBarData(
                    hasBack: true,
                    title: 'شخصی‌سازی محتوا',
                  ),
            physics: const BouncingScrollPhysics(),
            hidePlayer: true,
            padding: const EdgeInsets.all(16).copyWith(bottom: 92),
            showSliversFirst: false,
            slivers: [
              Consumer<CustomizeCategoryState>(
                builder: (context, state, child) =>
                    SliverStateHandler<CustomizeCategoryState>(
                  onRetry: state.getFavourites,
                  state: state,
                  itemPadding: const EdgeInsets.only(bottom: 16),
                  childCount: state.faves.length,
                  placeholder: ShimmerPlaceholder(
                    height: 48,
                    width: MediaQuery.sizeOf(context).width,
                    borderRadius: DesignConfig.mediumBorderRadius,
                  ),
                  centerEmptyState: false,
                  enableEmptyState: false,
                  emptyState: EmptyState(
                    asset: Assets.emptyChat,
                    title: 'اولین نظر را بنویسید...',
                  ),
                  builder: (context, state, index) => Column(
                    children: [
                      Center(
                        child: Container(
                          height: 48,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            border: Border.all(
                              width: 1,
                              color: state.faves[index].selected!
                                  ? Theme.of(context).colorScheme.focusedBorder
                                  : Theme.of(context).colorScheme.cardBorder
                            ),
                            color: state.faves[index].selected!
                                ? Theme.of(context).colorScheme.focused
                                : Theme.of(context).colorScheme.cardBorder
                          ),
                          child: CustomizeCategoryCheckbox(
                            title: state.faves[index].name!,
                            value: state.faves[index].selected,
                            checkColor: Theme.of(context).colorScheme.checkFav,
                            onChanged: (val) {
                              state.changeSelected(
                                index, state.faves, state.selectedFavIds);
                            }
                          )
                        ),
                      ),
                      // Add extra bottom padding for the last item
                      if (index == state.faves.length - 1)
                        const SizedBox(height: 80),
                    ],
                  ),
                ),
              ),
            ],
            children: [
              DidvanText(
                'کاربر گرامی لطفا دسته بندی که مایل هستید اطلاعات آن برای شما ارسال شود را انتخاب کنید',
                style: Theme.of(context).textTheme.bodyMedium,
              )
            ],
          ),
          Positioned(
              bottom: 40,
              left: 16,
              right: 16,
              child: DidvanButton(
                onPressed: state.appState == AppState.idle
                    ? () async {
                        await state.putFavourites(context);
                      }
                    : null,
                title: 'تایید',
                style: ButtonStyleMode.primary,
              ))
        ],
      ),
    );
  }
}