import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:loading_animations/loading_animations.dart';
import 'package:news_getx/modules/widgets/app_bar.dart';
import 'package:news_getx/modules/widgets/image.dart';
import 'package:news_getx/theme/app_colors.dart';
import 'package:news_getx/utils/date.dart';
import 'package:webview_flutter/webview_flutter.dart';

import 'detail_controller.dart';

class DetailPage extends GetView<DetailController> {
  DetailPage({Key? key}) : super(key: key);

  // 顶部导航
  AppBar _buildAppBar() {
    return transparentAppBar(
      leading: IconButton(
        onPressed: () {
          Get.back();
        },
        icon: Icon(
          Icons.arrow_back,
          color: AppColors.primaryText,
        ),
      ),
      actions: [
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.bookmark_border,
            color: AppColors.primaryText,
          ),
        ),
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.share,
            color: AppColors.primaryText,
          ),
        ),
      ],
    );
  }

  Widget _buildPageTitle() {
    return Container(
      margin: EdgeInsets.all(10.w),
      child: Row(
        children: [
          Column(
            children: <Widget>[
              // 标题
              Text(
                controller.state.item.category ?? "--",
                style: TextStyle(
                  fontFamily: "Montserrat",
                  fontWeight: FontWeight.normal,
                  fontSize: 30.sp,
                  color: AppColors.thirdElement,
                ),
              ),
              // 作者
              Text(
                controller.state.item.author ?? "--",
                style: TextStyle(
                  fontFamily: "Avenir",
                  fontWeight: FontWeight.normal,
                  fontSize: 14.sp,
                  color: AppColors.thirdElementText,
                ),
              ),
            ],
          ),
          Spacer(),
          // 标志
          CircleAvatar(
            // 头像半径
            radius: 22.w,
            backgroundImage: AssetImage("assets/images/channel-fox.png"),
          )
        ],
      ),
    );
  }

  Widget _buildPageHeader() {
    return Container(
      margin: EdgeInsets.all(10.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 图
          netImageCached(
            controller.state.item.thumbnail!,
            width: 335,
            height: 290,
          ),
          // 标题
          Container(
            margin: EdgeInsets.only(top: 10.h),
            child: Text(
              controller.state.item.title!,
              style: TextStyle(
                fontFamily: 'Montserrat',
                fontWeight: FontWeight.w600,
                color: AppColors.primaryText,
                fontSize: 24.sp,
                height: 1,
              ),
            ),
          ),

          // 一行三列
          Container(
            margin: EdgeInsets.only(top: 10.h),
            child: Row(
              children: [
                // 分类
                ConstrainedBox(
                  constraints: const BoxConstraints(
                    maxWidth: 120,
                  ),
                  child: Text(
                    controller.state.item.category!,
                    style: TextStyle(
                      fontFamily: 'Avenir',
                      fontWeight: FontWeight.normal,
                      color: AppColors.secondaryElementText,
                      fontSize: 14.sp,
                      height: 1,
                    ),
                    overflow: TextOverflow.clip,
                    maxLines: 1,
                  ),
                ),
                // 添加时间
                SizedBox(
                  width: 15.w,
                ),
                ConstrainedBox(
                  constraints: const BoxConstraints(
                    maxWidth: 120,
                  ),
                  child: Text(
                    '• ${timeLineFormat(controller.state.item.addtime ?? DateTime(0))}',
                    style: TextStyle(
                      fontFamily: 'Avenir',
                      fontWeight: FontWeight.normal,
                      color: AppColors.thirdElementText,
                      fontSize: 14.sp,
                      height: 1,
                    ),
                    overflow: TextOverflow.clip,
                    maxLines: 1,
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _buildWebView() {
    return Obx(() {
      return SizedBox(
        height: controller.webViewHeight.value,
        child: WebViewWidget(
          controller: controller.webViewController,
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(),
      body: Stack(
        children: [
          SingleChildScrollView(
            child: Column(
              children: [
                _buildPageTitle(),
                Divider(height: 1),
                _buildPageHeader(),
                _buildWebView(),
              ],
            ),
          ),
          Obx(() {
            return controller.isPageFinished.isTrue
                ? Container()
                : Align(
                    alignment: Alignment.center,
                    child: LoadingBouncingGrid.square(),
                  );
          })
        ],
      ),
    );
  }
}