import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:functions/src/features/contacts/domain/entities/contact_entity.dart';
import 'package:functions/src/features/contacts/presentation/edit_contact_screen.dart';
import 'package:functions/src/features/contacts/presentation/state/contacts_view_model.dart';
import 'package:navigation/navigation.dart';
import 'package:sf_localizations/sf_localizations.dart';
import 'package:utils/utils.dart';

class ContactsScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

  const ContactsScreen({super.key, required this.navigationContract});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(contactsViewModelProvider.notifier);
    final state = ref.watch(contactsViewModelProvider);

    final theme = ref.watch(themePortProvider);

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
      body: SafeArea(
        child: Column(
          children: [
            Container(
              padding: SizeUtils.getByScreen(
                  small: EdgeInsets.symmetric(horizontal: 22, vertical: 10),
                  big: EdgeInsets.symmetric(horizontal: 21, vertical: 8)
              ),
              child: Stack(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      IconButton(onPressed: () {Navigator.pop(context);},
                        icon: Icon(Icons.arrow_back)),
                      if (!state.isEditing) ...[
                        DecoratedBox(
                          decoration: BoxDecoration(
                            color: Color(0xFF588EA5),
                            shape: BoxShape.circle
                          ),
                          child: IconButton(onPressed: vm.toggleIsEditing,
                            icon: Icon(Icons.edit_outlined,
                              color: Colors.white,
                              size: SizeUtils.getByScreen(small: 30, big: 28),
                            )
                          ),
                        )
                      ]
                    ],
                  ),
                  Center(
                    child: Text(context.translate('Agenda'),
                      style: TextStyle(
                        fontSize: SizeUtils.getByScreen(small: 28, big: 27)
                      ),
                    )
                  )
                ],
              ),
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 20, big: 18)),
            Expanded( child: Container(
              padding: SizeUtils.getByScreen(
                small: EdgeInsets.symmetric(horizontal: 22, vertical: 10),
                big: EdgeInsets.symmetric(horizontal: 21, vertical: 8)
              ),
              child: ListView.separated(
                itemBuilder: (BuildContext context, int index)=>ContactCard(
                  contact: state.contacts[index],
                  isEditing: state.isEditing,
                ),
                separatorBuilder: (BuildContext context, int index)=>SizedBox(
                  height: SizeUtils.getByScreen(small: 18, big: 17)
                ),
                itemCount: state.contacts.length
              ),
            )),
            if (state.isEditing) ...[
              Container(
                padding: SizeUtils.getByScreen(
                  small: EdgeInsets.symmetric(horizontal: 26, vertical: 14),
                  big: EdgeInsets.symmetric(horizontal: 24, vertical: 12)
                ),
              ),
            ],
            Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Color(0xFF588EA5),
              ),
              width: SizeUtils.getByScreen(small: 48, big: 46),
              child: CustomTextButton(
                onPressed: (){},
                text: '+',
                color: Colors.white,
                size: SizeUtils.getByScreen(small: 48, big: 47),
              ),
            ),
          ],
        )
      ),
    );
  }
}

class ContactCard extends ConsumerWidget {

  final ContactEntity contact;
  final bool isEditing;

  const ContactCard({
    required this.contact,
    required this.isEditing,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.read(themePortProvider);

    return Container(
      padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(horizontal: 22, vertical: 10),
          big: EdgeInsets.symmetric(horizontal: 21, vertical: 8)
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(SizeUtils.getByScreen(small: 12, big: 18))),
        color: theme.getColorFor(ThemeCode.backgroundSecondary),
      ),
      child: Row(
        children: [
          Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: theme.getColorFor(ThemeCode.backgroundPrimary),
            ),
            padding: EdgeInsets.all(SizeUtils.getByScreen(small: 4, big: 12)),
            child: Icon(SFIcons.account,
              size: SizeUtils.getByScreen(small: 40, big: 44),
              color: Color(0xFF588EA5),
              weight: 30,
            ),
          ),
          SizedBox(width: SizeUtils.getByScreen(small: 16, big: 15)),
          Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(contact.name,
                      style: TextStyle(
                          fontSize: SizeUtils.getByScreen(small: 18, big: 19),
                          fontWeight: FontWeight.w500
                      )
                  ),
                  Text(contact.phone,
                      style: TextStyle(
                        fontSize: SizeUtils.getByScreen(small: 14, big: 13),
                      )
                  )
                ],
              )
          ),
          if (isEditing) ...[
            DecoratedBox(
              decoration: BoxDecoration(
                color: Color(0xFFFF5D52),
                borderRadius: BorderRadius.all(Radius.circular(12)),
              ),
              child: IconButton(
                onPressed: (){showDialog(context: context, builder: (context)=>Dialog(
                  child: Container(
                    padding: SizeUtils.getByScreen(
                        small: EdgeInsets.symmetric(horizontal: 32, vertical: 30),
                        big: EdgeInsets.symmetric(horizontal: 30, vertical: 28)
                    ),
                    width: SizeUtils.getByScreen(small: 360, big: 350),
                    height: SizeUtils.getByScreen(small: 195, big: 185),
                    child: Column(
                      children: [
                        Text(context.translate(I18n.legacyDeleteUserDialog),
                          textAlign: TextAlign.center,
                          style: TextStyle(fontSize: SizeUtils.getByScreen(small: 19, big: 18)),
                        ),
                        SizedBox(height: SizeUtils.getByScreen(small: 28, big: 27)),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Expanded(child: PrimaryButton(
                              onPressed: (){Navigator.pop(context);},
                              text: context.translate(I18n.legacyCancel),
                              color: Color(0xFF588EA5),
                              height: SizeUtils.getByScreen(small: 38, big: 36),
                              radius: SizeUtils.getByScreen(small: 32, big: 34),
                            )),
                            SizedBox(width: SizeUtils.getByScreen(small: 4, big: 16)),
                            Expanded(child: PrimaryButton(
                              onPressed: (){
                                Navigator.pop(context);
                              },
                              text: context.translate(I18n.legacyDelete),
                              color: Color(0xFF588EA5),
                              height: SizeUtils.getByScreen(small: 38, big: 36),
                              radius: SizeUtils.getByScreen(small: 32, big: 34),
                            ))
                          ],
                        )
                      ],
                    ),
                  ),
                ));},
                icon: Icon(
                  Icons.close,
                  color: Colors.white,
                ),
              ),
            ),
            SizedBox(width: SizeUtils.getByScreen(small: 16, big: 14)),
            DecoratedBox(
              decoration: BoxDecoration(
                color: Color(0xFF588EA5),
                borderRadius: BorderRadius.all(Radius.circular(12)),
              ),
              child:
              IconButton(
                onPressed: (){Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => EditContactScreen(
                    contact: contact,
                    /*navigationContract: navigationContract*/
                  )),
                );},
                icon: Icon(
                  Icons.edit_outlined,
                  color: Colors.white,
                ),
              ),
            ),
          ]
        ],
      ),
    );
  }
}