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/res/resources.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';

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> {
  @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: const EdgeInsets.symmetric(
                    vertical: 30.0, horizontal: 20.0),
                height: MediaQuery.of(context).size.height -
                    140 -
                    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: const EdgeInsets.all(10.0),
                        child: Flex(
                          direction: Axis.vertical,
                          children: [
                            const PoemContent(
                              title: "题破山寺后禅院",
                              author: "常建",
                              poemStr: poemStr,
                              fontSize: 22.0,
                            ),
                            Stack(
                              alignment: Alignment.center,
                              children: [
                                Positioned(
                                  left: 10.0,
                                  child: IconButton(
                                    icon: const Icon(
                                      Icons.camera_alt_outlined,
                                      size: 28.0,
                                    ),
                                    onPressed: () {},
                                  ),
                                ),
                                SizedBox(
                                  width: double.infinity,
                                  height: 90.0,
                                  child: IconButton(
                                    icon: const Icon(
                                      Icons.mic_none,
                                      size: 70.0,
                                      color: Colors.green,
                                    ),
                                    onPressed: () {},
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}