import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/models/studio_details_data.dart';
import 'package:didvan/views/home/comments/comments.dart';
import 'package:didvan/views/home/comments/comments_state.dart';
import 'package:didvan/views/home/studio/studio_details/studio_details_state.dart';
import 'package:didvan/views/home/studio/studio_details/widgets/details_tab_bar.dart';
import 'package:didvan/views/home/widgets/overview/multitype.dart';
import 'package:didvan/views/home/widgets/tag_item.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:didvan/views/widgets/state_handlers/state_handler.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class StudioDetailsWidget extends StatelessWidget {
  final ScrollController? scrollController;
  final VoidCallback? onCommentsTabSelected;
  const StudioDetailsWidget({
    Key? key,
    this.onCommentsTabSelected,
    this.scrollController,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final ds = MediaQuery.of(context).size;
    return Consumer<StudioDetailsState>(
      builder: (context, state, child) {
        bool isVideo = state.studio.media.contains('iframe');
        return Container(
          color: Theme.of(context).colorScheme.surface,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              if (!isVideo)
                DetailsTabBar(
                  isVideo: isVideo,
                  onCommentsTabSelected: onCommentsTabSelected ?? () {},
                ),
              const SizedBox(height: 16),
              StateHandler<StudioDetailsState>(
                onRetry: () {},
                state: state,
                builder: (context, state) {
                  if (state.selectedDetailsIndex == 0) {
                    return SingleChildScrollView(
                      padding: const EdgeInsets.symmetric(horizontal: 20),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          DidvanText(state.studio.description),
                          if (state.studio.tags.isNotEmpty)
                            const SizedBox(height: 20),
                          Wrap(
                            spacing: 8,
                            runSpacing: 8,
                            children: [
                              for (var i = 0; i < state.studio.tags.length; i++)
                                TagItem(tag: state.studio.tags[i]),
                            ],
                          ),
                          const SizedBox(height: 20),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              const SizedBox(),
                              if (state.nextStudio != null)
                                _StudioPreview(
                                  isNext: true,
                                  studio: state.nextStudio!,
                                  scrollController: scrollController,
                                ),
                              if (state.prevStudio != null)
                                _StudioPreview(
                                  isNext: false,
                                  studio: state.prevStudio!,
                                  scrollController: scrollController,
                                ),
                              const SizedBox(),
                            ],
                          )
                        ],
                      ),
                    );
                  }
                  if (state.selectedDetailsIndex == 1) {
                    return ChangeNotifierProvider<CommentsState>(
                      create: (context) => CommentsState(),
                      child: SizedBox(
                        height: ds.height -
                            ds.width * 9 / 16 -
                            144 -
                            MediaQuery.of(context).padding.top,
                        child: Comments(
                          pageData: {
                            'id': state.studio.id,
                            'type': 'studio',
                            'title': state.studio.title,
                            'onCommentsChanged': state.onCommentsChanged,
                            'isPage': false,
                          },
                        ),
                      ),
                    );
                  }
                  return Column(
                    children: [
                      if (state.studio.relatedContents.isEmpty)
                        for (var i = 0; i < 3; i++)
                          Padding(
                            padding: const EdgeInsets.only(
                              bottom: 8,
                              left: 16,
                              right: 16,
                            ),
                            child: MultitypeOverview.placeholder,
                          ),
                      for (var i = 0;
                          i < state.studio.relatedContents.length;
                          i++)
                        Padding(
                          padding: const EdgeInsets.only(
                            bottom: 8,
                            left: 16,
                            right: 16,
                          ),
                          child: MultitypeOverview(
                            item: state.studio.relatedContents[i],
                            onMarkChanged: (id, value) {},
                          ),
                        ),
                    ],
                  );
                },
              ),
            ],
          ),
        );
      },
    );
  }
}

class _StudioPreview extends StatelessWidget {
  final bool isNext;
  final StudioDetailsData studio;
  final ScrollController? scrollController;
  const _StudioPreview(
      {Key? key,
      required this.isNext,
      required this.studio,
      this.scrollController})
      : super(key: key);

  String get _previewTitle {
    if (studio.media.contains('iframe')) {
      return 'ویدئو ${isNext ? 'بعدی' : 'قبلی'} ';
    }
    return 'پادکست ${isNext ? 'بعدی' : 'قبلی'} ';
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        final state = context.read<StudioDetailsState>();
        state.getStudioDetails(
          isNext ? state.nextStudio!.id : state.prevStudio!.id,
          args: state.args,
          isForward: isNext,
        );
        scrollController?.animateTo(
          0,
          duration: DesignConfig.lowAnimationDuration,
          curve: Curves.easeIn,
        );
      },
      child: Container(
        width: 88,
        color: Colors.transparent,
        child: Column(
          children: [
            SkeletonImage(
              imageUrl: studio.image,
              aspectRatio: 1 / 1,
            ),
            const SizedBox(height: 8),
            Icon(
              isNext
                  ? DidvanIcons.angle_right_regular
                  : DidvanIcons.angle_left_regular,
            ),
            const SizedBox(height: 8),
            DidvanText(
              _previewTitle,
              style: Theme.of(context).textTheme.caption,
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 8),
            DidvanText(
              studio.title,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.center,
              style: Theme.of(context).textTheme.overline,
              color: Theme.of(context).colorScheme.caption,
            ),
          ],
        ),
      ),
    );
  }
}
