import 'package:flutter/material.dart';

import '../../common/func.dart';
import '../../dialog/create_type_dialog.dart';

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

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

class _CreatePageState extends State<CreatePage> {
  final TextEditingController _textBgController = TextEditingController();

  int gender = 1; //性别类型  1:男  0:女  3:其他

  String nameText = ""; //人物名字
  void _textNameChanged(String str) {
    nameText = str;
  }

  String bgText = ""; //人物背景
  void _textBgChanged(String str) {
    bgText = str;
  }

  String imageText = ""; //人物形象
  void _textImageChanged(String str) {
    imageText = str;
  }

  int currentStyleIndex = 0; //风格

  List<int> styleList = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  String type = ""; //分类

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Color(0xFF121213),
      appBar: AppBar(
        backgroundColor: Color(0xFF121213),
        scrolledUnderElevation: 0.0,
        title: Text(
          '创建个人模型',
          style: TextStyle(fontSize: 16, color: Colors.white),
        ),
        centerTitle: true,
        leading: IconButton(
          iconSize: 18,
          icon: Icon(Icons.arrow_back_ios_sharp),
          color: Colors.white,
          onPressed: () {
            // 处理返回操作
            Navigator.pop(context);
          },
        ),
      ),
      body: SingleChildScrollView(
        child: Container(
          margin: EdgeInsets.symmetric(horizontal: 16),
          child: Column(
            children: [
              Container(
                alignment: Alignment.center,
                child: Text(
                  "角色信息",
                  style: TextStyle(color: Color(0xFFFF9000), fontSize: 15),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 15),
                alignment: Alignment.centerLeft,
                child: Text(
                  "角色昵称",
                  style: TextStyle(color: Colors.white, fontSize: 14),
                ),
              ),
              TextField(
                cursorColor: const Color(0xFFFF9000),
                style: const TextStyle(color: Colors.white),
                onChanged: _textNameChanged,
                decoration: const InputDecoration(
                  hintText: '给角色取个名字',
                  hintStyle: TextStyle(color: Color(0xFF4C4C4C), fontSize: 13),
                  border: UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xFF3A3A3A)), // 设置下划线颜色
                  ),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xFFFF9000)),
                  ),
                ),
                maxLength: 8,
              ),
              Container(
                margin: const EdgeInsets.only(top: 10),
                alignment: Alignment.centerLeft,
                child: const Text(
                  "性别",
                  style: TextStyle(color: Colors.white, fontSize: 14),
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: 17),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    GestureDetector(
                      onTap: () {
                        gender = 1;
                        setState(() {});
                      },
                      child: Container(
                        width: 93,
                        height: 32,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            border: Border.all(color: Color(gender == 1 ? 0xFFFF9000 : 0xFF686868), width: 1),
                            borderRadius: const BorderRadius.all(Radius.circular(7))),
                        child: Text(
                          "男",
                          style: TextStyle(fontSize: 13, color: Color(gender == 1 ? 0xFFFF9000 : 0xFF686868)),
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        gender = 2;
                        setState(() {});
                      },
                      child: Container(
                        width: 93,
                        height: 32,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            border: Border.all(color: Color(gender == 2 ? 0xFFFF9000 : 0xFF686868), width: 1),
                            borderRadius: BorderRadius.all(Radius.circular(7))),
                        child: Text(
                          "女",
                          style: TextStyle(fontSize: 13, color: Color(gender == 2 ? 0xFFFF9000 : 0xFF686868)),
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        gender = 3;
                        setState(() {});
                      },
                      child: Container(
                        width: 93,
                        height: 32,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            border: Border.all(color: Color(gender == 3 ? 0xFFFF9000 : 0xFF686868), width: 1),
                            borderRadius: BorderRadius.all(Radius.circular(7))),
                        child: Text(
                          "其他",
                          style: TextStyle(fontSize: 13, color: Color(gender == 3 ? 0xFFFF9000 : 0xFF686868)),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 20),
                alignment: Alignment.centerLeft,
                child: Text(
                  "身份背景",
                  style: TextStyle(color: Colors.white, fontSize: 14),
                ),
              ),
              Container(
                alignment: Alignment.center,
                margin: EdgeInsets.only(top: 20),
                padding: const EdgeInsets.only(left: 9, top: 5, right: 9),
                decoration: BoxDecoration(
                  color: Color(0xFF262626),
                  borderRadius: BorderRadius.all(Radius.circular(6.6)),
                ),
                child: TextField(
                  controller: _textBgController,
                  keyboardType: TextInputType.name,
                  cursorColor: Color(0xFFFF9000),
                  // focusNode: _commentFocus,
                  decoration:
                      InputDecoration.collapsed(hintText: '描述越详细，越接近你心目中的形象', hintStyle: const TextStyle(fontSize: 12.0, color: Color(0xFF535353))),
                  textAlign: TextAlign.left,
                  maxLines: 6,
                  style: const TextStyle(fontSize: 14.0, color: Colors.white),
                  onChanged: _textBgChanged,
                  autofocus: false,
                  maxLength: 500,
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 15),
                alignment: Alignment.centerLeft,
                child: Text(
                  "开场白",
                  style: TextStyle(color: Colors.white, fontSize: 14),
                ),
              ),
              TextField(
                cursorColor: const Color(0xFFFF9000),
                style: const TextStyle(color: Colors.white),
                onChanged: _textNameChanged,
                decoration: const InputDecoration(
                  hintText: '它的开场第一句话',
                  hintStyle: TextStyle(color: Color(0xFF4C4C4C), fontSize: 13),
                  border: UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xFF3A3A3A)), // 设置下划线颜色
                  ),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xFFFF9000)),
                  ),
                ),
                maxLength: 50,
              ),
              GestureDetector(
                onTap: () {
                  FunctionUtil.bottomSheetDialog(context, CreateTypeDialog(
                    onTap: (type) {
                      this.type = type;
                      setState(() {});
                    },
                  ));
                },
                child: Container(
                  width: double.infinity,
                  height: 45,
                  margin: EdgeInsets.only(top: 10),
                  decoration: BoxDecoration(
                    color: Color(0xFF202020),
                    borderRadius: BorderRadius.all(Radius.circular(7)),
                  ),
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Positioned(
                        left: 10,
                        child: Text(
                          "分类",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      Positioned(
                        right: 10,
                        child: Text(
                          type == "" ? "添加" : type,
                          style: TextStyle(color: type == "" ? Colors.white : Color(0xFFFF9000)),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                width: double.infinity,
                height: 45,
                margin: EdgeInsets.only(top: 17),
                decoration: BoxDecoration(
                  color: Color(0xFF202020),
                  borderRadius: BorderRadius.all(Radius.circular(7)),
                ),
                child: Container(),
              ),
              Container(
                alignment: Alignment.center,
                margin: EdgeInsets.only(top: 41),
                child: Text(
                  "角色形象",
                  style: TextStyle(color: Color(0xFFFF9000), fontSize: 15),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 15),
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      "形象描述",
                      style: TextStyle(color: Colors.white, fontSize: 14),
                    ),
                    Text(
                      "随机生成",
                      style: TextStyle(color: Color(0xFFFF9000), fontSize: 10),
                    ),
                  ],
                ),
              ),
              Container(
                alignment: Alignment.center,
                margin: EdgeInsets.only(top: 20),
                padding: const EdgeInsets.only(left: 9, top: 5, right: 9),
                decoration: BoxDecoration(
                  color: Color(0xFF262626),
                  borderRadius: BorderRadius.all(Radius.circular(6.6)),
                ),
                child: TextField(
                  // controller: _textBgController,
                  keyboardType: TextInputType.name,
                  cursorColor: Color(0xFFFF9000),
                  // focusNode: _commentFocus,
                  decoration: InputDecoration.collapsed(hintText: '长相,场景,衣服', hintStyle: const TextStyle(fontSize: 12.0, color: Color(0xFF535353))),
                  textAlign: TextAlign.left,
                  maxLines: 3,
                  style: const TextStyle(fontSize: 14.0, color: Colors.white),
                  onChanged: _textImageChanged,
                  autofocus: false,
                  maxLength: 100,
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 15),
                alignment: Alignment.centerLeft,
                child: Text(
                  "风格选择",
                  style: TextStyle(color: Colors.white, fontSize: 14),
                ),
              ),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Container(
                    // width: 500,
                    alignment: Alignment.centerLeft,
                    margin: EdgeInsets.only(top: 21),
                    height: 154,
                    child: GridView.count(
                        shrinkWrap: true,
                        //水平子Widget之间间距
                        crossAxisSpacing: 12.0,
                        //垂直子Widget之间间距
                        mainAxisSpacing: 9.0,
                        //GridView内边距
                        padding: EdgeInsets.zero,
                        //一行的Widget数量
                        crossAxisCount: 2,
                        //子Widget宽高比例
                        childAspectRatio: 1.0,
                        //子Widget列表
                        children: _item(styleList),
                        physics: const NeverScrollableScrollPhysics(),
                        //类似 cellForRow 函数
                        scrollDirection: Axis.horizontal)),
              ),
              Container(
                margin: EdgeInsets.only(top: 15),
                alignment: Alignment.centerLeft,
                child: Text(
                  "选择参考图像",
                  style: TextStyle(color: Colors.white, fontSize: 14),
                ),
              ),
              Container(
                width: double.infinity,
                height: 118,
                margin: EdgeInsets.only(top: 17),
                decoration: BoxDecoration(
                  color: Color(0xFF202020),
                  borderRadius: BorderRadius.all(Radius.circular(7)),
                ),
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      top: 38,
                      child: Image(width: 18, height: 18, image: AssetImage('assets/images/img_add.png')),
                    ),
                    Positioned(
                        top: 77,
                        child: Text(
                          "将基于上传的参考图片生成基础模型",
                          style: TextStyle(color: Color(0xFF6F6F6F), fontSize: 10),
                        ))
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 35),
                width: size.width,
                height: 30,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                        left: 0,
                        child: Text(
                          "是否公开",
                          style: TextStyle(color: Colors.white, fontSize: 14),
                        )),
                    Positioned(
                        left: 70,
                        child: Text(
                          "审核中....",
                          style: TextStyle(color: Color(0xFF696969), fontSize: 12),
                        )),
                    Positioned(
                      right: 0,
                      child: Image(width: 52, height: 21, image: AssetImage('assets/images/ic_open_f.png')),
                    )
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.symmetric(vertical: 48),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      width: 116,
                      height: 37,
                      alignment: Alignment.center,
                      decoration:
                          BoxDecoration(border: Border.all(color: Color(0xFFFF9000), width: 1), borderRadius: BorderRadius.all(Radius.circular(7))),
                      child: Text(
                        "智能一键生成",
                        style: TextStyle(fontSize: 14, color: Color(0xFFFF9000)),
                      ),
                    ),
                    Container(
                      width: 191,
                      height: 37,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: Color(0xFFFF9000),
                        borderRadius: BorderRadius.all(Radius.circular(7)),
                      ),
                      child: Text(
                        "立即生成",
                        style: TextStyle(fontSize: 14, color: Colors.black),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  _item(List<int> list) {
    final size = MediaQuery.of(context).size;
    final w113 = size.width / 3.185840707964602;
    final h159 = size.width / 2.264150943396226;
    final w105 = size.width / 3.428571428571429;

    return list.map((res) {
      int index = styleList.indexOf(res);
      return GestureDetector(
        onTap: () {
          currentStyleIndex = index;
          setState(() {});
        },
        child: Container(
          alignment: Alignment.center,
          child: Stack(
            children: [
              // ClipRRect(
              //   borderRadius: BorderRadius.all(Radius.circular(15)),
              //   child: CachedNetworkImage(
              //     width: w113,
              //     height: h159,
              //     fit: BoxFit.cover,
              //     imageUrl: res.imageUrl!,
              //     errorWidget: (context, url, error) => const Icon(Icons.error),
              //   ),
              // ),
              Container(
                width: 72,
                height: 72,
                decoration: BoxDecoration(
                  color: Colors.grey,
                  borderRadius: BorderRadius.all(Radius.circular(7)),
                  border: Border.all(color: Color(0xFFFF9000), width: currentStyleIndex == index ? 1 : 0),
                ),
              )
            ],
          ),
        ),
      );
    }).toList();
  }
}