import 'package:didvan/models/requests/studio.dart';
import 'package:didvan/models/tag.dart';
import 'package:didvan/models/view/app_bar_data.dart';
import 'package:didvan/views/hashtag/hashtag_state.dart';
import 'package:didvan/views/home/main/widgets/infography_item.dart';
import 'package:didvan/views/widgets/overview/news.dart';
import 'package:didvan/views/widgets/overview/podcast.dart';
import 'package:didvan/views/widgets/overview/radar.dart';
import 'package:didvan/views/widgets/overview/video.dart';
import 'package:didvan/views/widgets/didvan/scaffold.dart';
import 'package:didvan/views/widgets/state_handlers/empty_list.dart';
import 'package:didvan/views/widgets/state_handlers/sliver_state_handler.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:provider/provider.dart';

class Hashtag extends StatefulWidget {
  final Map<String, dynamic> pageData;
  const Hashtag({Key? key, required this.pageData}) : super(key: key);

  @override
  State<Hashtag> createState() => _HashtagState();
}

class _HashtagState extends State<Hashtag> {
  Tag get _tag => widget.pageData['tag'];

  @override
  void initState() {
    final state = context.read<HashtagState>();
    state.id = _tag.id;
    Future.delayed(Duration.zero, () => state.getTagItems(page: 1));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DidvanScaffold(
      appBarData: AppBarData(title: '#${_tag.label}', hasBack: true),
      slivers: [
        Consumer<HashtagState>(
          builder: (context, state, child) => SliverStateHandler<HashtagState>(
            emptyState: const EmptyList(),
            enableEmptyState: state.items.isEmpty,
            itemPadding: const EdgeInsets.symmetric(vertical: 8.0),
            state: state,
            placeholder: RadarOverview.placeholder,
            builder: (context, state, index) {
              index++;
              if (index % 15 == 0 && state.lastPage != state.page) {
                state.getTagItems(page: state.page + 1);
              }
              index--;
              if (index == state.items.length) {
                return SpinKitThreeBounce(
                  color: Theme.of(context).colorScheme.primary,
                  size: 24,
                );
              }
              final item = state.items[index];
              final type = item.type;
              switch (type) {
                case 'infography':
                  return InfographyItem(
                    image: item.image,
                    category: item.category!,
                    title: item.title,
                    tag: const [],
                    onMarkChanged: (_, value, __) =>
                        _changeMark(item.id, value, type),
                    createdAt: item.createdAt,
                    id: item.id,
                    marked: item.marked,
                    liked: item.liked,
                    onLikedChanged: (_, value, __) =>
                        _changeLiked(item.id, value, 'banner'),
                    likes: item.likes,
                  );

                case 'radar':
                  return RadarOverview(
                    radar: item,
                    onMarkChanged: (_, value, __) =>
                        _changeMark(item.id, value, type),
                    onCommentsChanged: (_, count) => item.comments = count,
                    onLikedChanged: (id, value, shouldUpdate) =>
                        _changeLiked(item.id, value, type),
                  );
                case 'news':
                  return NewsOverview(
                    news: item,
                    onMarkChanged: (_, value, __) =>
                        _changeMark(item.id, value, type),
                    onLikedChanged: (id, value, shouldUpdate) =>
                        _changeLiked(item.id, value, type),
                  );
                case 'podcast':
                  return PodcastOverview(
                    podcast: item,
                    onMarkChanged: (_, value, __) =>
                        _changeMark(item.id, value, type),
                    studioRequestArgs:
                        const StudioRequestArgs(page: 0, type: 'podcast'),
                  );
                case 'video':
                  return VideoOverview(
                    video: item,
                    onMarkChanged: (_, value, __) =>
                        _changeMark(item.id, value, type),
                    studioRequestArgs:
                        const StudioRequestArgs(page: 0, type: 'video'),
                  );
              }
              return const SizedBox();
            },
            childCount:
                state.items.length + (state.page != state.lastPage ? 1 : 0),
            onRetry: () => state.getTagItems(page: state.page),
          ),
        )
      ],
    );
  }

  void _changeMark(int id, bool value, String type) {
    final state = context.read<HashtagState>();
    state.items
        .firstWhere((element) => element.id == id && element.type == type)
        .marked = value;
    state.update();
    if (type == widget.pageData['type']) {
      widget.pageData['onMarkChanged'](id, value);
    }
  }

  void _changeLiked(int id, bool value, String type) {
    final state = context.read<HashtagState>();
    state.items
        .firstWhere((element) => element.id == id && element.type == type)
        .marked = value;
    state.update();
    if (type == widget.pageData['type']) {
      widget.pageData['onLikedChanged'](id, value);
    }
  }
}
