
import 'package:cpt_property/modules/news_detail/property_news_detail_vm.dart';
import 'package:cpt_property/modules/rent/page/property_rent_page.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:plugin_basic/widget/webview_page.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/color_utils.dart';
import 'package:shared/utils/ext_dart.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:shared/utils/size_config.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/load_state_layout.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';

import '../../router/page/property_page_router.dart';

@RoutePage()
class PropertyNewsDetailPage extends HookConsumerWidget {
  final int id;

  const PropertyNewsDetailPage({Key? key, @PathParam() required this.id}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context, required int id}) {
    if (context != null) {
      context.router.push(PropertyNewsDetailPageRoute(id: id));
    } else {
      appRouter.push(PropertyNewsDetailPageRoute(id: id));
    }
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(propertyNewsDetailVmProvider.notifier);
    final state = ref.watch(propertyNewsDetailVmProvider);
    useEffect(() {
      // 组件挂载时执行 - 执行接口请求
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => vm.initPageData(id));
      return () {
        // 组件卸载时执行
      };
    }, []);

    // return state.detailData != null
    //     ? WebViewPage(
    //   showAppbar: true,
    //   initialUrl: state.detailData?['detail_url'],
    //   arguments: {'title': state.detailData?['title']},
    // ): const SizedBox.shrink();

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        S.current.news_detail,
        backgroundColor: context.appColors.backgroundWhite,
      ),
      backgroundColor: context.appColors.whiteBG,
      body: SizedBox(
          width: double.infinity,
          height: double.infinity,
          child: EasyRefresh(
            controller: vm.refreshController,
            // 上拉加载
            onLoad: null,
            // 下拉刷新
            onRefresh: null,
            child: LoadStateLayout(
              state: state.loadingState,
              errorMessage: state.errorMessage,
              errorRetry: () {
                vm.retryRequest();
              },
              successSliverWidget: [
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                          (context, index){
                        return state.dataRes !=null? _buildContentBox(context, ref, state.dataRes!): Container();
                      },
                      childCount: 1
                  ),
                )
              ],
            ),
          ).marginOnly(top: 0, bottom: 5)
      ),
    );
  }


  Widget _buildContentBox(BuildContext context, WidgetRef ref, Map<String, dynamic> detailInfo) {
    final title = detailInfo.getValue('title',  '');
    final coverImage = detailInfo.getValue('cover_image',  '');
    final content = detailInfo.getValue('content',  '');
    final createdAt = detailInfo.getValue('created_at',  '');
    final likesCount = detailInfo.getValue('likes_count',  '');
    final liked = detailInfo.getValue('liked',  '');
    return Padding(
      padding: const EdgeInsets.only(left: 16, right: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题
          MyTextView(
            title,
            isFontMedium: true,
            fontSize: 24,
            textColor: context.appColors.textBlack,
            marginTop: 5,
          ),
          // 时间
          MyTextView(
            createdAt,
            isFontRegular: true,
            fontSize: 15,
            textColor: context.appColors.textBlack,
            marginTop: 11,
            marginBottom: 17.5,
          ),
          // 图片
          coverImage.isNotEmpty?
            MyLoadImage(
              coverImage,
              width: SizeConfig().screenWidth,
              height: 190,
              fit: BoxFit.cover,
            ) : const SizedBox.shrink(),
          // 内容
          // MyTextView(
          //   content,
          //   isFontRegular: true,
          //   fontSize: 15,
          //   textColor: context.appColors.textBlack,
          //   marginTop: 24.5,
          // ),

          Html(data: content),
        ]
      ),
    );
  }
}
