import 'package:fcs/helpers/theme.dart';
import 'package:fcs/pages/package/package_info.dart';
import 'package:fcs/pages/main/util.dart';
import 'package:fcs/pages/widgets/fcs_id_icon.dart';
import 'package:fcs/pages/widgets/local_text.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

DateFormat dayFormat = DateFormat("MMM dd yyyy");
DateFormat timeFormat = DateFormat("HH:mm");

typedef CallbackOnViewDetail();

class Bubble extends StatelessWidget {
  Bubble(
      {this.message,
      this.date,
      this.delivered,
      this.isMine,
      this.sender,
      this.isSystem,
      this.isCustomer,
      this.showDate,
      this.callbackOnViewDetail});

  final CallbackOnViewDetail callbackOnViewDetail;
  final DateTime date;
  final String message, sender;
  final bool delivered, isMine, isSystem, isCustomer, showDate;

  @override
  Widget build(BuildContext context) {
    final bg = isMine ? Colors.greenAccent.shade100 : Colors.white;
    final align = isMine ? CrossAxisAlignment.end : CrossAxisAlignment.start;
    final icon = delivered ? Icons.done_all : Icons.done;
    final radius = isMine
        ? BorderRadius.only(
            topLeft: Radius.circular(25.0),
            bottomLeft: Radius.circular(25.0),
            bottomRight: Radius.circular(30.0),
          )
        : BorderRadius.only(
            topRight: Radius.circular(25.0),
            bottomLeft: Radius.circular(30.0),
            bottomRight: Radius.circular(25.0),
          );
    return Column(
      crossAxisAlignment: align,
      children: <Widget>[
        showDate ? Center(child: Text(dateFormat.format(date))) : Container(),
        Container(
          constraints: BoxConstraints(
              maxWidth: MediaQuery.of(context).size.width * 0.8, minWidth: 10),
          margin: const EdgeInsets.all(3.0),
          padding: const EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  blurRadius: .5,
                  spreadRadius: 1.0,
                  color: Colors.black.withOpacity(.32))
            ],
            color: bg,
            borderRadius: radius,
          ),
          child: Column(
            crossAxisAlignment: align,
            children: (isMine && isCustomer) || (!isMine && !isCustomer)
                ? [getMsg(context, icon)]
                : isSystem
                    ? [
                        FcsIDIcon(),
                        getMsg(context, icon),
                        FlatButton(
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0),
                            ),
                            color: Colors.blue[50],
                            onPressed: () => _viewDetail(),
                            child: Text(
                                getLocalString(context, "message.view.detail"),
                                style: TextStyle(
                                    color: primaryColor,
                                    fontWeight: FontWeight.bold)))
                      ]
                    : [
                        Text(isCustomer ? "FCS Team" : sender,
                            style: TextStyle(
                              color: Colors.black38,
                              fontSize: 10.0,
                            )),
                        getMsg(context, icon),
                      ],
          ),
        )
      ],
    );
  }

  getMsg(BuildContext context, IconData iconData) {
    return Stack(
      children: <Widget>[
        Padding(
            padding: EdgeInsets.only(right: 48.0),
            child: Text(message,
                style: hasUnicode(message)
                    ? newLabelStyleMM(color: primaryColor)
                    : newLabelStyle(color: primaryColor))),
        Positioned(
          bottom: 0.0,
          right: 0.0,
          child: Row(
            children: <Widget>[
              Text(timeFormat.format(date),
                  style: TextStyle(
                    color: Colors.black38,
                    fontSize: 10.0,
                  )),
              SizedBox(width: 3.0),
              Icon(
                iconData,
                size: 12.0,
                color: Colors.black38,
              )
            ],
          ),
        ),
      ],
    );
  }

  _viewDetail() {
    if (callbackOnViewDetail != null) callbackOnViewDetail();
  }
}
