import 'package:flutter/material.dart';

class CreatePage extends StatefulWidget {
  const CreatePage({super.key});

  @override
  State<CreatePage> createState() => _CreatePageState();
}

class _CreatePageState extends State<CreatePage> {
  final TextEditingController _textController = TextEditingController(text: '');
  final FocusNode _commentFocus = FocusNode(); //输入框焦点

  String promptText = "";

  void _textFieldChanged(String str) {
    promptText = str;
  }

  final List<String> items = ['爵士', '民谣', '爵士', 'DJ', '经典', '纯音乐', '戏曲', '车载'];

  int styleIndex = 0;

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Color(0xFF0E0A10),
      body: Stack(
        children: [
          Image(width: size.width, height: 180, image: AssetImage('assets/images/banner_bg.png')),
          SingleChildScrollView(
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 16),
              child: Column(
                children: [
                  Container(
                    margin: EdgeInsets.only(top: 24),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Image(width: 79, height: 19, image: AssetImage('assets/images/ic_music.png')),
                        Image(width: 49, height: 45, image: AssetImage('assets/images/ic_vip.png')),
                      ],
                    ),
                  ),

                  Container(
                    alignment: Alignment.centerLeft,
                    margin: EdgeInsets.only(top: 20),
                    child: Text(
                      '歌词生歌',
                      style: TextStyle(fontSize: 16, color: Colors.white),
                    ),
                  ),

                  ///输入框 描述
                  Container(
                    padding: EdgeInsets.all(1),
                    margin: EdgeInsets.only(top: 16),
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [Color(0xFF3FBBFE), Color(0xFFA541FF)],
                          begin: Alignment.bottomLeft, // 渐变开始位置
                          end: Alignment.topRight, // 渐变结束位置
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(6.6))),
                    child: Container(
                      alignment: Alignment.center,
                      padding: const EdgeInsets.only(left: 9, top: 13, right: 9),
                      decoration: BoxDecoration(
                        color: Color(0xFF0E0A10),
                        borderRadius: BorderRadius.all(Radius.circular(6.6)),
                      ),
                      child: TextField(
                        controller: _textController,
                        keyboardType: TextInputType.name,
                        focusNode: _commentFocus,
                        decoration:
                            InputDecoration.collapsed(hintText: '描述歌词的场景', hintStyle: const TextStyle(fontSize: 13.0, color: Color(0xFFB5B5B5))),
                        textAlign: TextAlign.left,
                        maxLines: 5,
                        style: const TextStyle(fontSize: 16.0, color: Colors.white),
                        onChanged: _textFieldChanged,
                        autofocus: false,
                        maxLength: 500,
                      ),
                    ),
                  ),

                  Container(
                    alignment: Alignment.centerLeft,
                    margin: EdgeInsets.only(top: 30),
                    child: Text(
                      '音乐风格',
                      style: TextStyle(fontSize: 16, color: Colors.white),
                    ),
                  ),

                  Container(
                    alignment: Alignment.centerLeft,
                    margin: EdgeInsets.only(top: 18),
                    child: Wrap(
                      spacing: 10.0,
                      runSpacing: 12.0,
                      children: List.generate(items.length, (index) {
                        return Builder(builder: (BuildContext context) {
                          return Container(
                            padding: EdgeInsets.all(1),
                            decoration: BoxDecoration(
                              gradient: LinearGradient(
                                colors: [
                                  styleIndex == index ? Color(0xFF3FBBFE) : Color(0xFF919191),
                                  styleIndex == index ? Color(0xFFA541FF) : Color(0xFF919191)
                                ],
                                begin: Alignment.bottomLeft, // 渐变开始位置
                                end: Alignment.topRight, // 渐变结束位置
                              ),
                              borderRadius: BorderRadius.all(Radius.circular(16)),
                            ),
                            child: GestureDetector(
                              behavior: HitTestBehavior.opaque,
                              onTap: () {
                                styleIndex = index;
                                setState(() {});
                              },
                              child: Container(
                                padding: EdgeInsets.symmetric(vertical: 6, horizontal: 23),
                                decoration: BoxDecoration(
                                  color: Color(0xFF0E0A10),
                                  // border: Border.all(color: Color(0xFF919191), width: 1),
                                  borderRadius: BorderRadius.all(Radius.circular(16)),
                                ),
                                child: Text(
                                  '${items[index]}',
                                  style: TextStyle(color: styleIndex == index ? Color(0xFF3FBBFE) : Color(0xFF919191), fontSize: 12),
                                ),
                              ),
                            ),
                          );
                        });
                      }),
                    ),
                  ),
                  Container(
                    alignment: Alignment.centerLeft,
                    margin: EdgeInsets.only(top: 30),
                    child: Text(
                      '音乐名称',
                      style: TextStyle(fontSize: 16, color: Colors.white),
                    ),
                  ),

                  Container(
                    height: 42,
                    padding: EdgeInsets.all(1),
                    margin: EdgeInsets.only(top: 16,bottom: 50),
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [Color(0xFF3FBBFE), Color(0xFFA541FF)],
                          begin: Alignment.bottomLeft, // 渐变开始位置
                          end: Alignment.topRight, // 渐变结束位置
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(6.6))),
                    child: Container(
                      alignment: Alignment.center,
                      padding: const EdgeInsets.only(left: 9, right: 9),
                      decoration: BoxDecoration(
                        color: Color(0xFF0E0A10),
                        borderRadius: BorderRadius.all(Radius.circular(6.6)),
                      ),
                      child: TextField(
                        controller: _textController,
                        keyboardType: TextInputType.name,
                        focusNode: _commentFocus,
                        decoration:
                        InputDecoration.collapsed(hintText: '输入歌曲名称', hintStyle: const TextStyle(fontSize: 13.0, color: Color(0xFFB5B5B5))),
                        textAlign: TextAlign.left,
                        maxLines: 1,
                        style: const TextStyle(fontSize: 16.0, color: Colors.white),
                        onChanged: _textFieldChanged,
                        autofocus: false,

                      ),
                    ),
                  ),


                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}