import 'package:electronic_assistant/base/base_page.dart';
import 'package:electronic_assistant/resource/assets.gen.dart';
import 'package:electronic_assistant/resource/string.gen.dart';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
import 'package:photo_manager/photo_manager.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import '../../resource/colors.gen.dart';
import '../../utils/common_style.dart';
import 'controller.dart';

class AudioPickerPage extends BasePage<AudioPickerController> {
  const AudioPickerPage({super.key});

  @override
  Color backgroundColor() {
    return ColorName.transparent;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: "#F6F5F8".toColor(),
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(16),
          topRight: Radius.circular(16),
        ),
      ),
      height: ScreenUtil().screenHeight - 70.h,
      child: Column(
        children: [
          _buildTitleView(),
          Expanded(child: Obx(() {
            return SmartRefresher(
              enablePullUp: true,
              enablePullDown: false,
              onLoading: controller.onLoadMoreData,
              controller: controller.refreshController,
              child: ListView.builder(
                itemBuilder: _buildItem,
                itemCount: controller.audioList.length,
              ),
            );
          })),
          _buildImportBtnView()
        ],
      ),
    );
  }

  Widget _buildTitleView() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 18.h),
      child: IntrinsicHeight(
        child: Stack(
          children: [
            Container(
              margin: EdgeInsets.only(left: 16.w),
              child: GestureDetector(
                onTap: () {
                  controller.pickSystemFile();
                },
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    StringName.audioPickerAllFile.tr,
                    style: TextStyle(
                        fontSize: 14.sp, color: ColorName.primaryTextColor),
                  ),
                ),
              ),
            ),
            Center(
                child: Text(
              StringName.importLocalAudio.tr,
              style:
                  TextStyle(fontSize: 17.sp, color: ColorName.primaryTextColor),
            )),
            Container(
              margin: EdgeInsets.only(right: 16.w),
              child: GestureDetector(
                onTap: () {
                  Get.back();
                },
                child: Align(
                  alignment: Alignment.centerRight,
                  child: Text(
                    StringName.cancel.tr,
                    style: TextStyle(
                        fontSize: 14.sp, color: ColorName.secondaryTextColor),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildImportBtnView() {
    return Container(
      color: ColorName.white,
      padding: EdgeInsets.symmetric(vertical: 6.h),
      child: GestureDetector(
        onTap: () {
          controller.onImportClick();
        },
        child: Container(
          height: 48.h,
          margin: EdgeInsets.symmetric(horizontal: 16.w),
          width: double.infinity,
          decoration: getCommonDecoration(8.w),
          child: Center(
            child: Text(
              StringName.selectAndImport.tr,
              style: TextStyle(fontSize: 16.sp, color: ColorName.white),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildItem(BuildContext context, int index) {
    AssetEntity entity = controller.audioList[index];
    return GestureDetector(
      onTap: () {
        controller.onItemClick(entity);
      },
      child: Obx(() {
        return Container(
          decoration: controller.currentEntity?.id == entity.id
              ? BoxDecoration(
                  border: Border.all(color: '#6177F2'.toColor(), width: 2.w),
                  color: '#E7E9F6'.toColor(),
                  borderRadius: BorderRadius.circular(8.w),
                )
              : BoxDecoration(
                  color: ColorName.white,
                  borderRadius: BorderRadius.circular(8.w),
                ),
          margin: EdgeInsets.only(bottom: 8.h, left: 16.w, right: 16.w),
          padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 14.h),
          child: Row(
            children: [
              Assets.images.iconFilesFile.image(width: 32.w, height: 32.w),
              SizedBox(width: 8.w),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      entity.title ?? '',
                      style: TextStyle(
                          fontSize: 14.sp,
                          color: ColorName.primaryTextColor,
                          fontWeight: FontWeight.bold),
                    ),
                    Row(
                      children: [
                        Text(entity.duration.toDouble().toFormattedDuration(),
                            style: TextStyle(
                                fontSize: 12.sp,
                                color: ColorName.tertiaryTextColor)),
                        SizedBox(width: 6.w),
                        Container(
                            width: 1,
                            height: 9,
                            color: ColorName.tertiaryTextColor),
                        SizedBox(width: 6.w),
                        Text(
                            entity.createDateSecond
                                    ?.toFormattedDate('yyyy-MM-dd HH:mm') ??
                                '',
                            style: TextStyle(
                                fontSize: 12.sp,
                                color: ColorName.tertiaryTextColor))
                      ],
                    )
                  ],
                ),
              )
            ],
          ),
        );
      }),
    );
  }
}