import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:one_poem/poem/widgets/poem_content.dart';
import 'package:one_poem/recorder/widgets/poem_voice_widget.dart';
import 'package:one_poem/routers/fluro_navigator.dart';
import 'package:one_poem/util/toast_utils.dart';
import 'package:one_poem/widgets/bars/home_action_bar.dart';
import 'package:one_poem/widgets/bars/home_menu_bar.dart';
import 'package:one_poem/widgets/my_app_bar.dart';

import 'package:one_poem/extension/int_extension.dart';

import '../poem_router.dart';

class PoemRecordAudioPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _PoemRecordAudioPageState();

  const PoemRecordAudioPage({
    Key? key,
    required this.poemId,
    this.poemPanelHeight = 0,
  }) : super(key: key);

  final int poemPanelHeight;
  final int poemId;
}

class _PoemRecordAudioPageState extends State<PoemRecordAudioPage> {
  startRecord() {
    print("开始录制");
  }

  stopRecord(String path, double audioTimeLength) {
    print("结束束录制");
    print("音频文件位置" + path);
    print("音频录制时长" + audioTimeLength.toString());
  }

  @override
  Widget build(BuildContext context) {
    const poemStr =
        "qīng chén rù gǔ sì\n清晨入古寺，\nchū rì zhào gāo lín\n初日照高林。\nzhú jìng tōng yōu chù\n竹径通幽处，\nchán fáng huā mù shēn\n禅房花木深。\nshān guāng yuè niǎo xìng\n山光悦鸟性，\ntán yǐng kōng rén xīn\n潭影空人心。\nwàn lài cǐ dōu jì\n万籁此都寂，\ndàn yú zhōng qìng yīn\n但余钟磬音。";
    return Scaffold(
      appBar: MyAppBar(
        isBack: true,
        isTransparent: false,
        homeMenuHeader: HomeMenuHeader(
          funcLeft: () {
            setState(() {});
          },
          funcCenter: () {
            setState(() {});
          },
          funcRight: () {},
        ),
        homeActionWidgets: HomeActionWidgets(
          funcStar: () {
            print("starrrrrrr");
          },
        ),
      ),
      body: Container(
        alignment: Alignment.topCenter,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/poem/poem_background.png"),
            fit: BoxFit.fill,
          ),
        ),
        child: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin:
                    EdgeInsets.symmetric(vertical: 20.px, horizontal: 20.px),
                height: MediaQuery.of(context).size.height -
                    125.px -
                    widget.poemPanelHeight,
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.grey.shade200.withOpacity(0.1),
                  border: Border.all(
                      color: Colors.grey.shade50, width: 0.5), // 边色与边宽度
                ),
                child: ClipRect(
                  child: BackdropFilter(
                    filter: ImageFilter.blur(
                      sigmaX: 10.0,
                      sigmaY: 10.0,
                    ),
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.grey.shade200.withOpacity(0.1),
                      ),
                      child: Padding(
                        padding: EdgeInsets.all(10.px),
                        child: SingleChildScrollView(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              PoemContent(
                                title: "题破山寺后禅院",
                                author: "常建",
                                poemStr: poemStr,
                                fontSize: 22.px,
                              ),
                              Stack(
                                alignment: Alignment.center,
                                children: [
                                  Positioned(
                                    left: 10.px,
                                    child: IconButton(
                                      icon: Icon(
                                        Icons.camera_alt_outlined,
                                        size: 28.px,
                                      ),
                                      onPressed: () {
                                        Toast.show("不要着急吖，正在开发ing....");
                                      },
                                    ),
                                  ),
                                  SizedBox(
                                    width: double.infinity,
                                    height: 80.px,
                                    child: PoemVoiceWidget(
                                      startRecord: startRecord,
                                      stopRecord: stopRecord,
                                      // 加入定制化Container的相关属性
                                      height: 40.px,
                                    ),
                                  ),
                                ],
                              ),
                              Container(
                                padding: const EdgeInsets.all(10.0),
                                alignment: Alignment.centerRight,
                                height: 54.0,
                                width: double.infinity,
                                child: TextButton(
                                  style: ButtonStyle(
                                    side: MaterialStateProperty.all(
                                      const BorderSide(
                                          color: Colors.black54, width: 1),
                                    ),
                                  ),
                                  onPressed: () {
                                    NavigatorUtils.push(
                                      context,
                                      '${PoemRouter.poemPublish}?data=100',
                                    );
                                  },
                                  child: const Text(
                                    "下一步",
                                    style: TextStyle(color: Colors.white),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}