import 'dart:ui';

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

class TopNavBar extends StatelessWidget {
  final String title;
  GestureTapCallback? back;
  String? rightText;
  Widget? rightIcon;
  GestureTapCallback? rightClick;
  final Color textColor;
  final Color backGround;
  final Image backIcon;

  TopNavBar(
      {required this.title,
      GestureTapCallback? this.back,
      String? this.rightText,
      Widget? this.rightIcon,
      GestureTapCallback? this.rightClick,
      Color this.textColor = const Color(0xFF333333),
      Color this.backGround = Colors.white,
      Image this.backIcon = const Image(
          image: AssetImage(
            "assets/imgs/common/icon_back.png",
          ),
          height: 19)});

  @override
  Widget build(BuildContext context) {
    return Flex(direction: Axis.vertical, children: [
      Container(
        height: MediaQuery.of(context).viewPadding.top,
        color: backGround,
      ),
      Container(
        color: backGround,
        height: 48,
        child: Stack(
          alignment: Alignment.centerLeft,
          children: [
            Positioned(
                child: Container(
                    alignment: Alignment.center,
                    child: Flex(
                      direction: Axis.horizontal,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          width: 50,
                        ),
                        Expanded(
                            child: Center(
                                child: Text(
                          title,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(fontSize: 18, color: textColor),
                        ))),
                        Container(
                          width: 50,
                        )
                      ],
                    ))),
            ((rightText != null && rightText!.isNotEmpty) || rightIcon != null)
                ? Positioned(
                    right: 0,
                    top: 0,
                    bottom: 0,
                    child: InkWell(
                        onTap: () {
                          rightClick!();
                        },
                        child: Container(
                          alignment: Alignment.center,
                          padding: const EdgeInsets.only(right: 10),
                          child: rightIcon ?? Text(
                                  rightText!,
                                  style:
                                      TextStyle(fontSize: 15, color: textColor),
                                ),
                        )))
                : Container(),
            InkWell(
                onTap: () {
                  if (back != null) {
                    back!();
                  } else {
                    Navigator.pop(context);
                  }
                },
                child: Container(
                  alignment: Alignment.center,
                  width: 42,
                  height: 48,
                  child: backIcon,
                ))
          ],
        ),
      )
    ]);
  }
}