import 'package:chat/configs/app_colors.dart';
import 'package:chat/controllers/moment_controller.dart';
import 'package:chat/models/moment/moment_model.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class QuickReplyBar extends StatefulWidget {
  final bool? autofocus;
  final int dynamicId;
  final Comment? comment;
  const QuickReplyBar({
    Key? key,
    this.autofocus,
    required this.dynamicId,
    this.comment,
  }) : super(key: key);

  static const _border = OutlineInputBorder(
    borderSide: BorderSide.none,
    borderRadius: BorderRadius.all(Radius.circular(6)),
  );

  @override
  State<QuickReplyBar> createState() => _QuickReplyBarState();
}

class _QuickReplyBarState extends State<QuickReplyBar> {
  final content = ''.obs;

  @override
  Widget build(BuildContext context) {
    final ctrl = MomentController.to;
    return ColoredBox(
      color: AppColors.page,
      child: SafeArea(
        child: Row(
          children: [
            const SizedBox(width: 16),
            Expanded(
              child: SizedBox(
                height: 36,
                child: TextField(
                  onChanged: (value) => content.value = value,
                  autofocus: widget.autofocus ?? true,
                  decoration: InputDecoration(
                    hintStyle: const TextStyle(
                      fontSize: 13,
                    ),
                    border: QuickReplyBar._border,
                    focusedBorder: QuickReplyBar._border,
                    disabledBorder: QuickReplyBar._border,
                    hintText: widget.comment?.user?.nickname != null
                        ? '回复:${widget.comment?.user?.nickname}'
                        : '评论',
                    filled: true,
                    fillColor: AppColors.white,
                    contentPadding: const EdgeInsets.symmetric(horizontal: 8),
                    constraints: const BoxConstraints(),
                  ),
                ),
              ),
            ),
            const SizedBox(width: 8),
            // IconButton(
            //   onPressed: () {
            //     print('emoji picker');
            //   },
            //   icon: const Icon(Icons.emoji_emotions_outlined),
            //   color: Colors.grey,
            // ),
            Obx(() {
              return ElevatedButton(
                style: ButtonStyle(
                  elevation: MaterialStateProperty.all(0),
                  backgroundColor: MaterialStateProperty.resolveWith(
                    (states) {
                      if (states.contains(MaterialState.disabled)) {
                        return AppColors.active.withAlpha(128);
                      } else {
                        return AppColors.primary;
                      }
                    },
                  ),
                ),
                onPressed: content.isEmpty
                    ? null
                    : () => ctrl.sendReply(
                          widget.dynamicId,
                          content.value,
                          widget.comment,
                        ),
                child: const Text('发送'),
              );
            }),
            const SizedBox(width: 16),
          ],
        ),
      ),
    );
  }
}