import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/retrofit/data/activity.dart';
import 'package:huixiang/retrofit/data/article.dart';
import 'package:like_button/like_button.dart';
import 'dart:io';

import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';

class InputComment extends StatefulWidget {
  final String hintText;
  final Activity activity;
  final Article article;
  final bool isKeyBoardShow;
  final double keyboard_height;
  final double keyboard;
  final bool emojiShowing;
  final FocusNode commentFocus;
  final Function toComment;
  final Function onSmileyTap;
  final Function onTextFieldTap;
  final Function(String text) queryMemberComment;
  final Function() queryInformationLikes;
  final TextEditingController commentTextController;
  final bool isLike;
  final Function(bool emojiShow) emojiShowFunction;

  InputComment(
    Key key,
    this.hintText,
    this.isKeyBoardShow,
    this.keyboard_height,
    this.keyboard,
    this.emojiShowing,
    this.commentFocus,
    this.commentTextController,
    this.toComment,
    this.onSmileyTap,
    this.onTextFieldTap,
    this.queryMemberComment,
    this.queryInformationLikes,
  {
    this.activity,
    this.article,
    this.isLike,
    this.emojiShowFunction
  }
  ) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _InputComment();
  }
}

class _InputComment extends State<InputComment> {
  bool emojiShowing = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 16.h,),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withAlpha(12),
            offset: Offset(0, 2),
            blurRadius: 14,
            spreadRadius: 0,
          ),
        ],
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(8),
        ),
      ),
      child: Column(
        children: [
          Row(
            children: [
              IconButton(
                onPressed: () {
                  widget.onSmileyTap();
                },
                icon: Icon(
                  Icons.emoji_emotions,
                  color: Color(0xFF868686),
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  decoration: BoxDecoration(
                    color: Color(0xffF2F2F2),
                    borderRadius: BorderRadius.circular(2.0),
                  ),
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 4.w),
                    alignment: Alignment.topLeft,
                    child: TextField(
                      textInputAction:TextInputAction.send,
                      onTap: (){
                        widget.onTextFieldTap();
                      },
                      onEditingComplete: () {
                        var commentText = widget.commentTextController.text;
                        if (commentText.trim() == "") {
                          return;
                        }
                        widget.queryMemberComment(commentText);
                      },
                      maxLines: 8,
                      minLines: 1,
                      focusNode: widget.commentFocus,
                      controller: widget.commentTextController,
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: widget.hintText,
                        hintStyle: TextStyle(
                          fontSize: 14.sp,
                          color: Color(0xFF868686),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              if (widget.isKeyBoardShow)
                GestureDetector(
                  onTap: () {
                    var commentText = widget.commentTextController.text;
                    if (commentText.trim() == "") {
                      return;
                    }
                    widget.queryMemberComment(commentText);
                  },
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 20.w),
                    child: Text(
                      S.of(context).fasong,
                      style: TextStyle(
                        fontSize: 16.sp,
                        fontWeight: FontWeight.bold,
                        color: Color(0XFF1A1A1A),
                      ),
                    ),
                  ),
                ),
              if (!widget.isKeyBoardShow)
                InkWell(
                  onTap: widget.toComment,
                  child: Tooltip(
                    message: S.of(context).daopinglunliebiaodingbu,
                    child: Container(
                      padding: EdgeInsets.only(left: 20.w, right: 10.w),
                      child: Image.asset(
                        "assets/image/icon_comment.webp",
                        width: 24,
                        height: 24,
                      ),
                    ),
                  ),
                ),
              if (!widget.isKeyBoardShow)
                Tooltip(
                  message: S.of(context).dianzanxihuan_(widget.activity == null ? S.of(context).wenzhang : S.of(context).huodong),
                  child: LikeButton(
                    padding: EdgeInsets.all(10),
                    size: 24,
                    circleSize: 24,
                    circleColor: CircleColor(
                      start: Color(0xff00ddff),
                      end: Color(0xff0099cc),
                    ),
                    bubblesColor: BubblesColor(
                      dotPrimaryColor: Color(0xff33b5e5),
                      dotSecondaryColor: Color(0xff0099cc),
                    ),
                    bubblesSize: 24,
                    likeBuilder: (bool isLiked) {
                      return isLiked
                          ? Image.asset(
                        "assets/image/icon_like.webp",
                        width: 24,
                        height: 24,
                      )
                          : Image.asset(
                        "assets/image/icon_like_h.webp",
                        width: 24,
                        height: 24,
                      );
                    },
                    isLiked: (widget.activity != null
                        ? widget.activity.liked
                        : widget.article != null
                        ? widget.article.liked
                        : widget.isLike??false),
                    onTap: (isLiked) async {
                      await widget.queryInformationLikes();
                      return (widget.activity != null
                          ? widget.activity.liked
                          : widget.article != null
                          ? widget.article.liked
                          : widget.isLike??false);
                    },
                    countBuilder: (int count, bool isLiked, String text) {
                      return Text(
                        text,
                        style: TextStyle(
                          color: Color(0xFF1A1A1A),
                          fontSize: 12.sp,
                        ),
                      );
                    },
                  ),
                ),
            ],
          ),
          SizedBox(height: 16.h,),
          Offstage(
            offstage: !widget.emojiShowing,
            child: SizedBox(
                height: 250.h,
                child:
                EmojiPicker(
                  textEditingController: widget.commentTextController,
                  config: Config(
                    columns: 7,
                    emojiSizeMax: 32 * (Platform.isIOS ? 1.30 : 1.0),
                    verticalSpacing: 0,
                    horizontalSpacing: 0,
                    gridPadding: EdgeInsets.zero,
                    initCategory: Category.RECENT,
                    bgColor: const Color(0xFFF2F2F2),
                    // indicatorColor: Colors.blue,
                    iconColor: Colors.grey,
                    iconColorSelected: Colors.blue,
                    backspaceColor: Colors.blue,
                    skinToneDialogBgColor: Colors.white,
                    skinToneIndicatorColor: Colors.grey,
                    enableSkinTones: true,
                    showRecentsTab: true,
                    recentsLimit: 28,
                    replaceEmojiOnLimitExceed: false,
                    noRecents:Text(
                      "最近使用",
                      style: TextStyle(fontSize: 20, color: Colors.black26),
                      textAlign: TextAlign.center,
                    ),
                    loadingIndicator: const SizedBox.shrink(),
                    tabIndicatorAnimDuration: kTabScrollDuration,
                    categoryIcons: const CategoryIcons(),
                    buttonMode: ButtonMode.MATERIAL,
                    checkPlatformCompatibility: true,
                  ),
                )),
          ),
        ],
      ),
    );
  }}