import 'dart:async';

import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/constants/assets.dart';
import 'package:didvan/models/view/app_bar_data.dart';
import 'package:didvan/routes/routes.dart';
import 'package:didvan/views/home/bookmarks/bookmark_state.dart';
import 'package:didvan/views/widgets/didvan/scaffold.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/menu_item.dart';
import 'package:didvan/views/widgets/overview/multitype.dart';
// import 'package:didvan/views/widgets/search_field.dart';
import 'package:didvan/views/widgets/animated_visibility.dart';
import 'package:didvan/views/widgets/didvan/card.dart';
import 'package:didvan/views/widgets/didvan/divider.dart';
import 'package:didvan/views/widgets/item_title.dart';
import 'package:didvan/views/widgets/state_handlers/empty_list.dart';
import 'package:didvan/views/widgets/state_handlers/empty_result.dart';
import 'package:didvan/views/widgets/state_handlers/sliver_state_handler.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Bookmarks extends StatefulWidget {
  const Bookmarks({Key? key}) : super(key: key);

  @override
  State<Bookmarks> createState() => _BookmarksState();
}

class _BookmarksState extends State<Bookmarks> {
  final _focuseNode = FocusNode();
  // Timer? _timer;

  @override
  void initState() {
    Future.delayed(Duration.zero, () {
      context.read<BookmarksState>().getBookmarks(page: 1);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final state = context.watch<BookmarksState>();
    return DidvanScaffold(
      appBarData: AppBarData(title: 'رصدخانه من', hasBack: true, isSmall: true),
      physics: const BouncingScrollPhysics(),
      padding: const EdgeInsets.all(8.0),
      hidePlayer: true,
      slivers: [
        SliverPadding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          sliver: SliverToBoxAdapter(
            child: Column(
              children: [
                const SizedBox(height: 16),
                AnimatedVisibility(
                  duration: DesignConfig.lowAnimationDuration,
                  isVisible: !state.searching,
                  child: DidvanCard(
                    child: Column(
                      children: [
                        MenuOption(
                          onTap: () => _onCategorySelected(5),
                          title: 'رادارهای استراتژیک',
                          icon: DidvanIcons.radar_regular,
                          iconSize: 24,
                        ),
                        const DidvanDivider(),
                        MenuOption(
                          onTap: () => _onCategorySelected(2),
                          title: 'دنیای فولاد',
                          icon: DidvanIcons.foolad_regular,
                          iconSize: 24,
                        ),
                        const DidvanDivider(),
                        MenuOption(
                          onTap: () => _onCategorySelected(1),
                          title: 'پویش افق',
                          icon: DidvanIcons.scanning_regular,
                          iconSize: 24,
                        ),
                        const DidvanDivider(),
                        MenuOption(
                          onTap: () => _onCategorySelected(3),
                          title: 'ویدیو‌کست',
                          icon: DidvanIcons.video_regular,
                          iconSize: 24,
                        ),
                        const DidvanDivider(),
                        MenuOption(
                          onTap: () => _onCategorySelected(4),
                          title: 'پادکست‌',
                          icon: DidvanIcons.podcast_regular,
                          iconSize: 24,
                        ),
                        const DidvanDivider(),
                        MenuOption(
                          onTap: () => _onCategorySelected(6),
                          title: 'سها',
                          icon: DidvanIcons.saha_regular,
                          iconSize: 24,
                        ),
                        const DidvanDivider(),
                        MenuOption(
                          onTap: () => _onCategorySelected(7),
                          title: 'اینفوگرافی',
                          icon: DidvanIcons.infography_regular,
                          iconSize: 24,
                        ),
                      ],
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.centerRight,
                  child: AnimatedVisibility(
                    duration: DesignConfig.lowAnimationDuration,
                    isVisible: !state.searching,
                    child: const ItemTitle(title: 'نشان شده‌ها'),
                  ),
                ),
              ],
            ),
          ),
        ),
        SliverPadding(
          padding: const EdgeInsets.symmetric(
            horizontal: 16,
          ),
          sliver: SliverStateHandler<BookmarksState>(
            state: state,
            centerEmptyState: state.searching,
            builder: (context, state, index) {
              index++;
              if (index % 15 == 0 && state.lastPage != state.page) {
                state.getBookmarks(page: state.page + 1);
              }
              index--;
              return MultitypeOverview(
                item: state.bookmarks[index],
                onMarkChanged: state.onMarkChanged,
                hasUnmarkConfirmation: true,
                enableCaption: true,
                enableBookmark: true,
              );
            },
            placeholder: MultitypeOverview.placeholder,
            itemPadding: const EdgeInsets.only(bottom: 8),
            paddingEmptyState: 0,
            emptyState: state.searching
                ? EmptyResult(onNewSearch: _focuseNode.requestFocus)
                : Column(
                    children: [
                      DidvanText(
                        'در قسمت رصدخانه من، تمامی محتواهایی که در قسمت‌های مختلف سوپراپلیکیشن دیدوان، بوکمارک (نشان‌دار) کرده‌اید، به تفکیک نمایش داده می‌شوند. هم‌چنین امکان درج یادداشت شخصی بصورت ضمیمه برای هر محتوا وجود دارد.',
                        fontSize: 14,
                        color: Theme.of(context).colorScheme.title,
                        textAlign: TextAlign.justify,
                      ),
                      Image.asset(
                        Assets.bookmarkAnimation,
                        width: MediaQuery.sizeOf(context).width,
                        height: 180,
                      ),
                    ],
                  ),
            enableEmptyState: state.bookmarks.isEmpty,
            childCount:
                state.bookmarks.length + (state.page != state.lastPage ? 1 : 0),
            onRetry: () => state.getBookmarks(page: state.page),
          ),
        ),
      ],
    );
  }

  void _onCategorySelected(int type) {
    FocusScope.of(context).unfocus();
    Navigator.of(context).pushNamed(Routes.filteredBookmarks, arguments: {
      'type': type,
      'onDeleted': (int id) {
        final state = context.read<BookmarksState>();
        state.bookmarks.removeWhere(
            (element) => element.id == id && element.typeInteger == type);
        state.update();
      },
    });
  }

  // void _onChanged(String value) {
  //   final state = context.read<BookmarksState>();
  //   if (value.length < 3 && value.isNotEmpty || state.lastSearch == value) {
  //     return;
  //   }
  //   _timer?.cancel();
  //   _timer = Timer(const Duration(seconds: 1), () {
  //     state.search = value;
  //     state.getBookmarks(page: 1);
  //   });
  // }
}