import 'dart:async';

import 'package:didvan/models/view/app_bar_data.dart';
import 'package:didvan/pages/home/settings/bookmarks/bookmark_state.dart';
import 'package:didvan/widgets/didvan/card.dart';
import 'package:didvan/widgets/didvan/divider.dart';
import 'package:didvan/widgets/didvan/scaffold.dart';
import 'package:didvan/pages/home/widgets/multitype_item.dart';
import 'package:didvan/pages/home/widgets/search_field.dart';
import 'package:didvan/widgets/shimmer_placeholder.dart';
import 'package:didvan/widgets/state_handlers/empty_list.dart';
import 'package:didvan/widgets/state_handlers/empty_result.dart';
import 'package:didvan/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();
    });
    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) => MultitypeItem(
            item: state.bookmarks[index],
          ),
          placeholder: const _NewsOverviewPlaceholder(),
          itemPadding: const EdgeInsets.only(bottom: 8),
          emptyState: state.searching
              ? EmptyResult(onNewSearch: _focuseNode.requestFocus)
              : const EmptyList(),
          enableEmptyState: state.bookmarks.isEmpty,
          childCount: state.bookmarks.length,
          onRetry: state.getBookmarks,
        ),
      ],
    );
  }

  // void _onCategorySelected(String? type) {
  //   FocusScope.of(context).unfocus();
  //   final state = context.read<BookmarksState>();
  //   state.groupName = type;
  //   Navigator.of(context).pushNamed(Routes.filteredBookmarks, arguments: state);
  // }

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

class _NewsOverviewPlaceholder extends StatelessWidget {
  const _NewsOverviewPlaceholder({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DidvanCard(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const ShimmerPlaceholder(height: 64, width: 64),
              const SizedBox(width: 8),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  ShimmerPlaceholder(height: 18, width: 200),
                  SizedBox(height: 8),
                  ShimmerPlaceholder(height: 18, width: 100),
                ],
              ),
            ],
          ),
          const SizedBox(height: 12),
          const ShimmerPlaceholder(
            height: 16,
            width: double.infinity,
          ),
          const SizedBox(height: 8),
          const ShimmerPlaceholder(
            height: 16,
            width: double.infinity,
          ),
          const SizedBox(height: 8),
          const ShimmerPlaceholder(
            height: 16,
            width: 100,
          ),
          const DidvanDivider(verticalPadding: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              ShimmerPlaceholder(height: 12, width: 150),
              ShimmerPlaceholder(height: 24, width: 24),
            ],
          ),
        ],
      ),
    );
  }
}