import 'package:electronic_assistant/base/base_page.dart';
import 'package:electronic_assistant/module/record/controller.dart';
import 'package:electronic_assistant/resource/colors.gen.dart';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../resource/assets.gen.dart';
import '../../widget/frame_animation_view.dart';

class RecordPage extends BasePage<RecordController> {
  const RecordPage({super.key});

  @override
  bool immersive() {
    return true;
  }

  @override
  bool statusBarDarkFont() {
    return false;
  }

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

  @override
  Color navigationBarColor() {
    return "#4A4F67".color;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(alignment: Alignment.bottomCenter, children: [
      _buildBottomGradient(),
      Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: const Icon(Icons.arrow_back_ios_new_rounded),
            color: ColorName.white,
            onPressed: () {
              Navigator.pop(context);
            },
          ),
          scrolledUnderElevation: 0,
          backgroundColor: ColorName.transparent,
          systemOverlayStyle: SystemUiOverlayStyle.light,
          actions: [
            _buildAddShortcut(false),
          ],
        ),
        backgroundColor: ColorName.transparent,
        body: Flex(
          direction: Axis.vertical,
          children: [
            _buildRecordStatus(),
            const Spacer(flex: 271),
            _buildRecordAnim(),
            const Spacer(flex: 407),
            _buildRecordControl(),
          ],
        ),
      ),
    ]);
  }

  Widget _buildAddShortcut(bool visible) {
    return GestureDetector(
      onTap: () {
        controller.addShortcut();
      },
      child: Visibility(
        visible: visible,
        child: Row(
          children: [
            Image(
                image: Assets.images.iconRecordAddShortcut.provider(),
                width: 24.w,
                height: 24.w),
            Padding(
              padding: EdgeInsets.only(left: 8.w, right: 16.w),
              child: Text(
                '添加到桌面',
                style: TextStyle(color: ColorName.white, fontSize: 14.w),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildRecordStatus() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      margin: EdgeInsets.only(top: 20.w),
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.only(right: 8.w),
            child: Image(
                image: Assets.images.iconRecordLogo.provider(),
                width: 45.w,
                height: 48.w),
          ),
          Obx(() {
            return Text(
              controller.recordStatus.value,
              style: TextStyle(color: ColorName.white, fontSize: 17.w),
            );
          }),
        ],
      ),
    );
  }

  Widget _buildRecordAnim() {
    return FrameAnimationView(
      framePath: 'assets/anim/anim_recording.zip',
      speed: 2,
      width: 360.w,
      height: 180.w,
    );
  }

  Widget _buildRecordControl() {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [
        Container(
          padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 30.w),
          decoration: BoxDecoration(
            color: "#4A4F67".color,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(40.w),
                topRight: Radius.circular(40.w)),
          ),
          child: Row(
            children: [
              Image(
                  image: Assets.images.iconRecordCancelDisable.provider(),
                  width: 56.w,
                  height: 56.w),
              const Spacer(),
              Image(
                  image: Assets.images.iconRecordSaveDisable.provider(),
                  width: 56.w,
                  height: 56.w),
            ],
          ),
        ),
        Column(
          children: [
            Image(
                image: Assets.images.iconRecordStart.provider(),
                width: 92.w,
                height: 92.w),
            Padding(
              padding: EdgeInsets.only(top: 10.w, bottom: 35.w),
              child: Text(
                "00:00:00",
                style: TextStyle(
                  color: ColorName.white,
                  fontSize: 16.w,
                ),
              ),
            )
          ],
        )
      ],
    );
  }

  Widget _buildBottomGradient() {
    return Container(
      height: 0.38.sh,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            "#006177F2".color,
            "#806177F2".color,
          ],
        ),
      ),
    );
  }
}