import 'package:flutter/material.dart';
import 'package:prosappco/src/components/photo_view.dart';
import 'package:prosappco/src/components/pop_appbar.dart';
import 'package:prosappco/src/screens/professional.dart';

class ProfessionalInfoScreen extends StatelessWidget {
  Professional professional;

  ProfessionalInfoScreen({super.key, required this.professional});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: PopAppbar(
            onPressed: () {
              Navigator.pop(context);
            },
            label: professional.name),
        body: SingleChildScrollView(
          child: Stack(
            children: [
              Column(
                children: [
                  Container(
                    width: double.infinity,
                    height: 140,
                    decoration: BoxDecoration(
                      color: const Color(0xFFD6F4FF),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.5),
                          spreadRadius: 1,
                          blurRadius: 7,
                          offset: const Offset(0, 2),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 50),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const SizedBox(
                          height: 5,
                        ),
                        Text(
                          professional.name,
                          style: const TextStyle(fontWeight: FontWeight.w500),
                        ),
                        Text(
                          professional.professionName,
                          style: const TextStyle(color: Color(0xFF1688C9)),
                        ),
                        professional.getEspecializaciones().isEmpty
                            ? const SizedBox()
                            : Text(
                                'Especializado/a en ${professional.getEspecializaciones()}',
                                style: const TextStyle(color: Colors.black54),
                              ),
                        Text(
                          professional.cityName,
                        ),
                      ],
                    ),
                  ),
                  professional.ubicacion == 'domicilio'
                      ? Container(
                          margin: const EdgeInsets.only(
                              left: 40, right: 40, top: 20, bottom: 20),
                          padding: const EdgeInsets.symmetric(
                              horizontal: 20, vertical: 15),
                          decoration: BoxDecoration(
                            color: const Color(0xFFD6F4FF),
                            borderRadius: BorderRadius.circular(20),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.5),
                                spreadRadius: 1,
                                blurRadius: 5,
                                offset: const Offset(1, 3),
                              ),
                            ],
                          ),
                          child: Row(
                            children: const [
                              Icon(
                                Icons.error_outline,
                                size: 27,
                                color: Colors.black54,
                              ),
                              SizedBox(width: 15),
                              Text(
                                'Este profesional solo atiende en\nsu dirección de trabajo.',
                                style: TextStyle(
                                    color: Colors.black, fontSize: 13),
                              ),
                            ],
                          ),
                        )
                      : const SizedBox(),
                  const SizedBox(height: 10),
                  const Text(
                    'Se unió el 02 de abril del 2023',
                    style: TextStyle(fontSize: 12),
                  ),
                  const SizedBox(height: 15),
                  Container(
                    decoration: BoxDecoration(
                      color: const Color(0xFFD6F4FF),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.2),
                          spreadRadius: 3,
                          blurRadius: 5,
                          offset: const Offset(0, 3),
                        ),
                      ],
                    ),
                    child: ListTile(
                      onTap: () {},
                      trailing: const Icon(Icons.keyboard_arrow_right,
                          color: Colors.black),
                      title: const Text(
                        'Reputación',
                        style: TextStyle(color: Colors.black),
                      ),
                      subtitle: Row(
                        children: const [
                          Icon(Icons.star),
                          Icon(Icons.star),
                          Icon(Icons.star),
                          Icon(Icons.star),
                          Icon(Icons.star_half),
                        ],
                      ),
                    ),
                  ),
                  ListTile(
                    onTap: () {},
                    leading: ReferencePhoto(
                      ref: professional.professionalRef,
                      size: 50,
                      sizeCircle: 50,
                      sizeIcon: 35,
                    ),
                    title: Row(
                      children: const [
                        Icon(Icons.star),
                        Icon(Icons.star),
                        Icon(Icons.star),
                        Icon(Icons.star),
                        Icon(Icons.star_half),
                      ],
                    ),
                    subtitle: const Text(
                      'Mi perfil',
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                  ListTile(
                    onTap: () {},
                    leading: ReferencePhoto(
                      ref: professional.professionalRef,
                      size: 50,
                      sizeCircle: 50,
                      sizeIcon: 35,
                    ),
                    title: Row(
                      children: const [
                        Icon(Icons.star),
                        Icon(Icons.star),
                        Icon(Icons.star),
                        Icon(Icons.star),
                        Icon(Icons.star),
                      ],
                    ),
                    subtitle: const Text(
                      'Mi perfil',
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                  ListTile(
                    onTap: () {},
                    leading: ReferencePhoto(
                      ref: professional.professionalRef,
                      sizeCircle: 50,
                      sizeIcon: 35,
                      size: 50,
                    ),
                    title: Row(
                      children: const [
                        Icon(Icons.star),
                        Icon(Icons.star),
                        Icon(Icons.star),
                        Icon(Icons.star),
                        Icon(Icons.star_border),
                      ],
                    ),
                    subtitle: const Text(
                      'Mi perfil',
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                ],
              ),
              Container(
                padding: const EdgeInsets.only(
                  top: 110,
                  left: 10,
                ),
                child: ReferencePhoto(
                  ref: professional.professionalRef,
                  size: 100,
                  sizeCircle: 100,
                  sizeIcon: 50,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}