import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CreateRoomPage extends StatefulWidget {
  CreateRoomPage({Key? key}) : super(key: key);

  @override
  State<CreateRoomPage> createState() => _CreateRoomPageState();
}

class _CreateRoomPageState extends State<CreateRoomPage> {
  final _formKey = GlobalKey<FormState>();
  final _roomName = TextEditingController();
  bool flag = false;

  List patternList = [
    RadioModel(
      true,
      '普通',
    ),
    RadioModel(
      false,
      '相亲',
    ),
    RadioModel(
      false,
      '拍卖',
    ),
    RadioModel(
      false,
      'KTV',
    ),
  ];

  List tagList = [
    RadioModel(
      true,
      '交友',
    ),
    RadioModel(
      false,
      '音乐',
    ),
    RadioModel(
      false,
      '游戏',
    ),
    RadioModel(
      false,
      '连麦聊',
    ),
  ];

  Widget _buttonstyle(theme, parameter) {
    return Container(
      child: Stack(
        children: [
          Container(
            width: 80.0,
            height: 40.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(2)),
              border: Border.all(
                  width: 1,
                  color: parameter.isSelected
                      ? theme
                      : Color.fromRGBO(222, 222, 222, 1)),
            ),
            child: Center(
              child: Text(
                "${parameter.buttonText}",
                style: TextStyle(
                    color: parameter.isSelected
                        ? theme
                        : Color.fromRGBO(51, 51, 51, 1)),
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0, // z轴阴影
        titleSpacing: 0, // 标题与其他控件的间隔
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: () => Navigator.of(context).pop(),
        ),
        title: Text(
          '创建派对房间',
          style: TextStyle(
              color: Color.fromRGBO(51, 51, 51, 1),
              fontSize: 16,
              fontWeight: FontWeight.bold),
        ),
      ),
      backgroundColor: Colors.white,
      resizeToAvoidBottomInset: false,
      body: Container(
        padding: EdgeInsets.all(15),
        child: Form(
          key: _formKey,
          // autovalidateMode: AutovalidateMode.onUserInteraction, // 自动验证
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                children: [
                  TextFormField(
                    controller: _roomName,
                    validator: (value) {
                      return value!.trim().isEmpty ? '请输入房间名' : null;
                    },
                    style: TextStyle(fontSize: 16.0),
                    textInputAction: TextInputAction.next,
                    decoration: InputDecoration(
                      hintText: '输入房间名',
                      hintStyle:
                          TextStyle(color: Color.fromRGBO(187, 187, 187, 1)),
                      contentPadding:
                          EdgeInsets.all(15.0), // 输入内容距离上下左右距离，该属性控制高度
                      fillColor: Color.fromRGBO(247, 248, 250, 1), // 输入框的背景填充颜色
                      filled: true,
                      suffixIcon: IconButton(
                        icon: Image.asset(
                          'images/createRoom/refresh.png',
                          width: 12.0,
                          height: 17.0,
                        ),
                        onPressed: () {
                          _roomName.clear();
                        },
                      ),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10),
                        borderSide: BorderSide.none,
                      ),
                    ),
                  ),
                  SizedBox(height: 25.0),

                  // 房间模式_单选框
                  Container(
                    padding: EdgeInsets.fromLTRB(0, 0, 0, 25),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '房间模式',
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            fontSize: 14.0,
                            color: Color.fromRGBO(153, 153, 153, 1),
                          ),
                        ),
                        SizedBox(height: 15),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: List<Widget>.generate(patternList.length,
                              (index) {
                            return InkWell(
                              child: _buttonstyle(
                                  Color.fromRGBO(21, 185, 208, 1),
                                  patternList[index]),
                              onTap: () {
                                setState(() {
                                  patternList.forEach(
                                      (element) => element.isSelected = false);
                                  print(patternList[index].buttonText);
                                  patternList[index].isSelected = true;
                                });
                              },
                            );
                          }),
                        ),
                      ],
                    ),
                  ),

                  // 房间标签_单选框
                  Container(
                    padding: EdgeInsets.fromLTRB(0, 0, 0, 25),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '房间标签',
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            fontSize: 14.0,
                            color: Color.fromRGBO(153, 153, 153, 1),
                          ),
                        ),
                        SizedBox(height: 15),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children:
                              List<Widget>.generate(tagList.length, (index) {
                            return InkWell(
                              child: _buttonstyle(
                                  Color.fromRGBO(239, 134, 146, 1),
                                  tagList[index]),
                              onTap: () {
                                setState(() {
                                  tagList.forEach(
                                      (element) => element.isSelected = false);
                                  print(tagList[index].buttonText);
                                  tagList[index].isSelected = true;
                                });
                              },
                            );
                          }),
                        ),
                      ],
                    ),
                  ),

                  Divider(
                    height: 1.0,
                    color: Color.fromRGBO(235, 235, 235, 1),
                  ),
                  SizedBox(height: 25.0),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '房间密码',
                        style: TextStyle(color: Colors.black, fontSize: 16.0),
                      ),
                      CupertinoSwitch(
                        value: flag,
                        activeColor: Color.fromRGBO(21, 185, 208, 1),
                        onChanged: (value) {
                          setState(() {
                            flag = value;
                            print(flag);
                          });
                        },
                      ),
                    ],
                  ),
                  SizedBox(height: 40.0),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '修改密码',
                        style: TextStyle(color: Colors.black, fontSize: 16.0),
                      ),
                      GestureDetector(
                        onTap: () {
                          print('箭头图标被点击');
                        },
                        child: Icon(
                          size: 16.0,
                          Icons.arrow_forward_ios,
                          color: Color.fromRGBO(153, 153, 153, 1),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              Column(
                children: [
                  Text(
                    '派对房间管理规范',
                    style: TextStyle(
                      color: Color.fromRGBO(153, 153, 153, 1),
                      fontSize: 12.0,
                    ),
                  ),
                  SizedBox(height: 5.0),
                  ElevatedButton(
                    child: const Text(
                      '创建',
                      style: TextStyle(fontSize: 16.0, color: Colors.white),
                    ),
                    style: ElevatedButton.styleFrom(
                      primary: Color.fromRGBO(21, 185, 208, 1),
                      minimumSize: Size(188, 50),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(30)),
                    ),
                    onPressed: () {
                      if (_formKey.currentState!.validate()) {
                        print('表单验证通过！');
                      }
                    },
                  ),
                  SizedBox(height: 52.0),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class RadioModel {
  bool isSelected;
  final String buttonText;
  RadioModel(
    this.isSelected,
    this.buttonText,
  );
}