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

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

  @override
  State<AvatarName> createState() => _AvatarNameState();
}

class _AvatarNameState extends State<AvatarName> {
  //输入口
  final TextEditingController _inputController = TextEditingController();
  final FocusNode _focusNode = FocusNode();
  bool _isEdit = false;

  ///开始编辑
  void _handleEdit() {
    setState(() {
      _isEdit = true;
    });
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _focusNode.requestFocus();
    });
  }

  ///确定编辑内容
  void _confirmEdit(String value) {
    setState(() {
      _isEdit = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      spacing: 15,
      children: [
        Container(
          width: 80,
          height: 80,
          decoration: BoxDecoration(
            color: Color(0xffcae2fd),
            border: Border.all(
              color: Color(0xff797e80),
              width: 2,
            ),
            borderRadius: BorderRadius.circular(5),
          ),
          alignment: Alignment.center,
          child: Container(
            width: 50,
            padding: EdgeInsets.all(5),
            decoration: BoxDecoration(
              color: Color(0xff8e8d93),
              borderRadius: BorderRadius.circular(5),
            ),
            child: Icon(
              RemixIcons.user_fill,
              color: Color(0xffcae2fd),
            ),
          ),
        ),
        Expanded(
          child: Visibility(
            visible: _isEdit,
            replacement: InkWell(
              onTap: _handleEdit,
              child: Row(
                spacing: 10,
                children: [
                  Text(
                    "教练如何称呼你?",
                    style: Theme.of(context).textTheme.labelMedium,
                  ),
                  Icon(
                    RemixIcons.pencil_fill,
                    size: 18,
                    color: Theme.of(context).textTheme.labelMedium?.color,
                  ),
                ],
              ),
            ),
            child: TextField(
              focusNode: _focusNode,
              controller: _inputController,
              style: TextStyle(fontSize: 14),
              decoration: InputDecoration(
                hintText: "输入你的姓名",
                isCollapsed: true,
                contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 10),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    width: 1,
                    color: Theme.of(context).colorScheme.surfaceContainerHigh,
                  ),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    width: 1,
                    color: Theme.of(context).colorScheme.surfaceContainerHigh,
                  ),
                ),
              ),
              onSubmitted: _confirmEdit,
            ),
          ),
        ),
      ],
    );
  }
}