prosappco/lib/screens/user/user_view_profile_screen.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:prosappco/blocs/professional_list_bloc/professional_list_bloc.dart';

class UserViewProfileScreen extends StatelessWidget {
  UserProfessional userProfessional;

  UserViewProfileScreen({
    super.key,
    required this.userProfessional,
  });

  final double bannerHeight = 200;
  final double profileHeight = 160;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Perfil Profesional'),
      ),
      body: ListView(
        padding: EdgeInsets.zero,
        children: [
          buildTop(),
          buildContent(),
        ],
      ),
    );
  }

  Stack buildTop() {
    final top = bannerHeight - profileHeight / 2;
    final bottom = profileHeight / 2;
    return Stack(
      clipBehavior: Clip.none,
      alignment: Alignment.center,
      children: [
        Container(
          margin: EdgeInsets.only(bottom: bottom),
          child: buildBannerImage(),
        ),
        Positioned(
          top: top,
          child: buildProfileImage(),
        ),
      ],
    );
  }

  buildContent() {
    return Column(
      children: [
        Text(
          userProfessional.myUser.name ?? '',
          overflow: TextOverflow.ellipsis,
          style: const TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
        ),
        Text(
          '${userProfessional.professionalInfo.profession}, ${userProfessional.myUser.city ?? ''}',
          overflow: TextOverflow.ellipsis,
          style: const TextStyle(fontSize: 18, color: Colors.black54),
        ),
        const Divider(),
        const Text(
          'Especialidades:',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w500,
          ),
        ),
        userProfessional.professionalInfo.specializations.isEmpty
            ? const Text(
                'No posee especialidades',
                overflow: TextOverflow.ellipsis,
                style: TextStyle(fontSize: 15, color: Colors.black45),
              )
            : Wrap(
                spacing: 8,
                runSpacing: 8,
                alignment: WrapAlignment.center,
                children: userProfessional.professionalInfo.specializations
                    .map((specialization) {
                  return Chip(
                    label: Text(specialization),
                  );
                }).toList(),
              ),
        Visibility(
          visible: userProfessional.professionalInfo.rate.isNotEmpty,
          child: const Divider(),
        ),
        Visibility(
          visible: userProfessional.professionalInfo.rate.isNotEmpty,
          child: const Text(
            'Tarifa:',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
        Visibility(
          visible: userProfessional.professionalInfo.rate.isNotEmpty,
          child: Wrap(
            spacing: 8,
            runSpacing: 8,
            alignment: WrapAlignment.center,
            children: [
              Chip(label: Text('\$${userProfessional.professionalInfo.rate}')),
            ],
          ),
        ),
        const Divider(),
        const Text(
          'Metodos de pago recibidos:',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w500,
          ),
        ),
        userProfessional.professionalInfo.paymentMethods.datafono ||
                userProfessional.professionalInfo.paymentMethods.nequi ||
                userProfessional.professionalInfo.paymentMethods.transferencia
            ? Wrap(
                spacing: 8,
                runSpacing: 8,
                alignment: WrapAlignment.center,
                children: [
                  Visibility(
                    visible: userProfessional
                        .professionalInfo.paymentMethods.datafono,
                    child: const Chip(label: Text('Datafono')),
                  ),
                  Visibility(
                    visible:
                        userProfessional.professionalInfo.paymentMethods.nequi,
                    child: const Chip(label: Text('Nequi')),
                  ),
                  Visibility(
                    visible: userProfessional
                        .professionalInfo.paymentMethods.transferencia,
                    child: const Chip(label: Text('Transferencia Bancaria')),
                  ),
                ],
              )
            : const Text(
                'No hay metodos de pago registrados',
                overflow: TextOverflow.ellipsis,
                style: TextStyle(fontSize: 15, color: Colors.black45),
              ),
        const Divider(),
      ],
    );
  }

  Container buildProfileImage() {
    return Container(
      width: 155,
      height: 155,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(
          color: Colors.white,
          width: 5,
        ),
      ),
      child: Container(
        width: 150,
        height: 150,
        decoration: BoxDecoration(
          color: Colors.grey.shade300,
          shape: BoxShape.circle,
          border: Border.all(width: 0),
          image: userProfessional.myUser.picture == null
              ? null
              : DecorationImage(
                  image: NetworkImage(userProfessional.myUser.picture ?? ''),
                  fit: BoxFit.contain,
                ),
        ),
        child: userProfessional.myUser.picture == null
            ? Icon(
                CupertinoIcons.person,
                color: Colors.grey.shade400,
                size: 40,
              )
            : null,
      ),
    );
  }

  Container buildBannerImage() {
    return Container(
      color: Colors.grey,
      child: Image.network(
        userProfessional.professionalInfo.bannerPicture,
        fit: BoxFit.cover,
        width: double.infinity,
        height: bannerHeight,
      ),
    );
  }
}