import 'package:fis_ui/widgets/scroll/refreshIndicator.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:flutter/material.dart';
import 'package:fis_i18n/i18n.dart';
import 'package:fis_ui/index.dart';
import 'package:fis_ui/base_define/page.dart';
import 'package:fis_ui/values/font_sizes.dart';
import 'package:get/get.dart';
import 'widgets/widgets.dart';
import 'index.dart';

class PastVideosPage extends FisView<PastVideosController> implements FPage {
  PastVideosPage({Key? key, this.singleMobilePage = false}) : super(key: key);
  @override
  final String pageName = "PastVideosPage";

  /// 独立页面，用于嵌入至其他页面
  final bool singleMobilePage;

  @override
  FWidget build(BuildContext context) {
    if (singleMobilePage) {
      return _buildMobileBody();
    }
    return FisBuilder<PastVideosController>(
      builder: (_) {
        return kIsMobile ? _buildMobileView() : _buildDesktopView();
      },
    );
  }

  /// 移动端 UI
  FWidget _buildMobileView() {
    return FScaffold(
      appBar: AppBar(
        elevation: 0,
        centerTitle: true,
        title: FText(
          i18nBook.college.pastVideo.t,
          style: TextStyle(
            fontSize: FFontSizes.H6,
          ),
        ),
        leading: FIconButton(
          businessParent: this,
          name: "",
          icon: FIcon(Icons.arrow_back_ios),
          onPressed: () {
            Get.back();
          },
        ),
      ),
      // title: i18nBook.college.pastVideo.t,
      body: _buildMobileBody(),
    );
  }

  FWidget _buildMobileBody() {
    return FSafeArea(
      child: FColumn(
        // 此处反向构建列表，为了让搜索栏阴影后渲染，否则阴影会被列表项遮挡
        verticalDirection: VerticalDirection.up,
        children: [
          FExpanded(
            child: _buildMobileListView(),
          ),
          _buildHeadBar(),
        ],
      ),
    );
  }

  /// 桌面端 UI
  FWidget _buildDesktopView() {
    return FColumn(
      // 此处反向构建列表，为了让搜索栏阴影后渲染，否则阴影会被列表项遮挡
      verticalDirection: VerticalDirection.up,
      children: [
        FExpanded(
          child: _buildDesktopListView(),
        ),
        _buildHeadBar(),
      ],
    );
  }

  static const BoxDecoration headBarStyleForMobile = BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Color.fromARGB(255, 247, 247, 247),
        Color.fromARGB(255, 241, 241, 241),
      ],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.black38,
        blurRadius: 5,
        spreadRadius: 1,
        offset: Offset(0, 1), // changes position of shadow
      ),
    ],
  );

  static const BoxDecoration headBarStyleForDesktop = BoxDecoration(
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        color: Colors.black38,
        blurRadius: 5,
        spreadRadius: 1,
        offset: Offset(0, 1), // changes position of shadow
      ),
    ],
  );

  /// 构建顶部（搜索+标签选择器）
  FWidget _buildHeadBar() {
    return FContainer(
      decoration: kIsMobile ? headBarStyleForMobile : headBarStyleForDesktop,
      child: FColumn(
        children: [
          FContainer(
            height: 60,
            child: SearchField(
              textEditingController: controller.searchBarTextController,
              textFieldFocusNode: controller.textFieldFocusNode,
              onSearch: controller.onClickSearch,
            ),
          ),
          VideoLabelBar(),
        ],
      ),
    );
  }

  // 移动端卡片列表视图
  FWidget _buildMobileListView() {
    return FRefreshIndicator(
      onRefresh: controller.refreshList,
      child: FObx(
        () => controller.state.videosList.isEmpty
            ? _buildNoDataOrLoading()
            : FListView.builder(
                padding: EdgeInsets.symmetric(vertical: 10),
                controller: controller.listViewScrollController,
                itemCount: controller.state.videosList.length,
                itemBuilder: (context, index) {
                  /// 是否是已加载的最后一个
                  final isLastItem =
                      index == controller.state.videosList.length - 1;
                  final noMoreData = index >= controller.totalCount - 1;
                  final card = VideoItem(
                    index: index,
                    onTap: () => controller.onClickVideoCard(index),
                    info: controller.state.videosList[index],
                  );
                  if (!isLastItem) {
                    return card;
                  } else {
                    return FColumn(
                      children: [
                        card,
                        _buildBottomTip(noMoreData),
                      ],
                    );
                  }
                },
              ),
      ),
    );
  }

  // PC 端卡片列表视图
  FWidget _buildDesktopListView() {
    return FContainer(
      color: Colors.grey[200],
      child: FObx(
        () => controller.state.videosList.isEmpty
            ? _buildNoDataOrLoading()
            : QuickFWidget(
                CustomScrollView(
                  controller: controller.listViewScrollController,
                  slivers: <Widget>[
                    SliverPadding(
                      padding: EdgeInsets.only(
                        top: 10,
                        left: 10,
                        right: 10,
                        bottom: 5,
                      ),
                      sliver: SliverGrid(
                        delegate: SliverChildBuilderDelegate(
                          (c, i) => VideoCard(
                            index: i,
                            onTap: () => controller.onClickVideoCard(i),
                            info: controller.state.videosList[i],
                          ),
                          childCount: controller.state.videosList.length,
                        ),
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 4,
                          childAspectRatio: 1.3,
                        ),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: _buildBottomTip(
                          controller.state.videosList.length >=
                              controller.totalCount),
                    ),
                  ],
                ),
              ),
      ),
    );
  }

  // 无数据提示
  FWidget _buildNoDataOrLoading() {
    return FCenter(
        child: FObx(() => controller.state.isLoading
            ? FCircularProgressIndicator()
            : FText(i18nBook.common.noData.t)));
  }

  // 列表底部提示（加载中/没有更多数据）
  FWidget _buildBottomTip(bool isLast) {
    return FContainer(
      height: 50,
      child: FCenter(
        child: FText(
          isLast ? i18nBook.college.noMoreData.t : i18nBook.common.loading.t,
          style: TextStyle(
            fontSize: 14,
            color: Colors.grey,
          ),
        ),
      ),
    );
  }
}
