import 'dart:async';

import 'package:didvan/config/design_config.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/models/view/app_bar_data.dart';
import 'package:didvan/routes/routes.dart';
import 'package:didvan/views/home/settings/bookmarks/bookmark_state.dart';
import 'package:didvan/views/home/widgets/menu_item.dart';
import 'package:didvan/views/home/widgets/overview/multitype.dart';
import 'package:didvan/views/home/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/didvan/scaffold.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,
      ),
      children: [
        SearchField(
          title: 'نشان شده‌ها',
          onChanged: _onChanged,
          focusNode: _focuseNode,
        ),
        const SizedBox(height: 16),
        AnimatedVisibility(
          duration: DesignConfig.lowAnimationDuration,
          isVisible: !state.searching,
          child: DidvanCard(
            child: Column(
              children: [
                MenuItem(
                  onTap: () => _onCategorySelected('radar'),
                  title: 'تحلیل‌های رادار',
                  icon: DidvanIcons.radar_regular,
                  iconSize: 24,
                ),
                const DidvanDivider(),
                MenuItem(
                  onTap: () => _onCategorySelected('news'),
                  title: 'اخبار',
                  icon: DidvanIcons.news_regular,
                  iconSize: 24,
                ),
                const DidvanDivider(),
                MenuItem(
                  onTap: () => _onCategorySelected('video'),
                  title: 'ویدئو‌ها',
                  icon: DidvanIcons.video_regular,
                  iconSize: 24,
                ),
                const DidvanDivider(),
                MenuItem(
                  onTap: () => _onCategorySelected('podcast'),
                  title: 'پادکست‌ها',
                  icon: DidvanIcons.podcast_regular,
                  iconSize: 24,
                ),
              ],
            ),
          ),
        ),
        Align(
          alignment: Alignment.centerRight,
          child: AnimatedVisibility(
            duration: DesignConfig.lowAnimationDuration,
            isVisible: !state.searching,
            child: const ItemTitle(title: 'آخرین نشان شده‌ها'),
          ),
        ),
      ],
      slivers: [
        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,
            );
          },
          placeholder: MultitypeOverview.placeholder,
          itemPadding: const EdgeInsets.only(bottom: 8),
          emptyState: state.searching
              ? EmptyResult(onNewSearch: _focuseNode.requestFocus)
              : const EmptyList(),
          enableEmptyState: state.bookmarks.isEmpty,
          childCount:
              state.bookmarks.length + (state.page != state.lastPage ? 1 : 0),
          onRetry: () => state.getBookmarks(page: state.page),
        ),
      ],
    );
  }

  void _onCategorySelected(String 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.type == 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);
    });
  }
}