appbar

class SingleMerchantAppBar extends StatefulWidget {
  final Merchant? merchant;
  final double? scrollPosition;
  const SingleMerchantAppBar({
    Key? key,
    this.merchant,
    this.scrollPosition,
  }) : super(key: key);

  @override
  _SingleMerchantAppBarState createState() => _SingleMerchantAppBarState();
}

class _SingleMerchantAppBarState extends State<SingleMerchantAppBar> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 175,
          child: Stack(
            children: [
              widget.scrollPosition == 0 || widget.scrollPosition! < 100
                  ? _buildBackgroundImage(context)
                  : Container(),
              Container(
                padding: EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        CustomBackButton(
                          greyBackground: true,
                        ),
                        CustomSearchButton(
                          greyBackground: true,
                          onPressed: () {},
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 30,
                    ),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        MerchantThumbnailCard(
                          imageUrl: "assets/images/aarong_logo_small.png",
                        ),
                        SizedBox(width: 15),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            _buildNameAndRating(),
                            SizedBox(
                              height: 15,
                            ),
                            _buildFollowRow(context),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        SizedBox(
          height: 5,
        ),
        CategoryBar(),
      ],
    );
  }

  Widget _buildFollowRow(BuildContext context) {
    return Row(
      children: <Widget>[
        FollowButton(
          isFollowing: true,
          blackBackground:
              widget.scrollPosition == 0 || widget.scrollPosition! < 100
                  ? false
                  : true,
          onPressed: () {},
        ),
        SizedBox(width: 20),
        FollowerCountIcon(
          isBlack: widget.scrollPosition == 0 || widget.scrollPosition! < 100
              ? false
              : true,
          followerCount: 4900,
        ),
        SizedBox(width: 20),
        AboutMerchantButton(
          isBlack: widget.scrollPosition == 0 || widget.scrollPosition! < 100
              ? false
              : true,
          onPressed: () {
            openMerchantProfilePage(context);
          },
        ),
      ],
    );
  }

  Widget _buildBackgroundImage(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
      ),
      child: AnimatedOpacity(
        opacity: widget.scrollPosition == 0 ? 1 : 0,
        duration: const Duration(milliseconds: 100),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(20.0),
              bottomLeft: Radius.circular(20.0),
            ),
            /*
              TO DO: BEFORE PROD CHANGE THIS TO NETWORK IMAGE
            */
            image: DecorationImage(
              image: AssetImage('assets/images/mock_aarong_background.png'),
              fit: BoxFit.cover,
            ),
          ),
          // child: FittedBox(
          //   child: Image.asset(
          //     'assets/images/mock_aarong_background.png',
          //     fit: BoxFit.fill,
          //   ),
          // ),
        ),
      ),
    );
  }

  Widget _buildNameAndRating() {
    return Row(
      children: <Widget>[
        Text(
          widget.merchant!.merchantName!,
          style: TextStyle(
            color: widget.scrollPosition == 0 || widget.scrollPosition! < 100
                ? CustomColors.white
                : CustomColors.primary,
            fontSize: 18,
            fontWeight: FontWeight.w600,
          ),
        ),
        SizedBox(width: 30),
        _buildRating(context),
      ],
    );
  }

  Widget _buildRating(BuildContext context) {
    return Row(
      children: <Widget>[
        Icon(
          Icons.star,
          color: Colors.amber,
          size: 20,
        ),
        SizedBox(width: 5),
        Text(
          widget.merchant!.merchantRating!.toString(),
          style: TextStyle(
            color: widget.scrollPosition == 0 || widget.scrollPosition! < 100
                ? CustomColors.white
                : CustomColors.primary,
            fontSize: 18,
            fontWeight: FontWeight.w600,
          ),
        )
      ],
    );
  }
}