import 'package:legacy_shared/src/data/models/entities/device_entity.dart';
import 'package:account/src/features/linked_devices/presentation/edit_linked_device_screen.dart';
import 'package:account/src/features/linked_devices/presentation/state/linked_devices_view_model.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:legacy_shared/legacy_shared.dart';
import 'package:navigation/navigation.dart';
import 'package:sf_localizations/sf_localizations.dart';
import 'package:utils/utils.dart';

class LinkedDevicesScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

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

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

    final theme = ref.watch(themePortProvider);

    return PageLayout(
      title: context.translate(I18n.legacyLinkedDevices),
      showEdit: true,
      onEditChange: vm.toggleIsEditing,
      body: 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)=>LinkedDeviceCard(
            device: state.linkedDevices[index],
            isEditing: state.isEditing,
            onDelete: ()=>vm.deleteDevice(state.linkedDevices[index]),
          ),
          separatorBuilder: (BuildContext context, int index)=>SizedBox(
            height: SizeUtils.getByScreen(small: 18, big: 17)
          ),
          itemCount: state.linkedDevices.length
        ),
      ),
    );
  }
}

class LinkedDeviceCard extends ConsumerWidget {

  final DeviceEntity device;
  final bool isEditing;
  final Function onDelete;

  const LinkedDeviceCard({
    required this.device,
    required this.isEditing,
    required this.onDelete,
  });

  @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.watch,
              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(device.carrierName,
                  style: TextStyle(
                    fontSize: SizeUtils.getByScreen(small: 18, big: 19),
                    fontWeight: FontWeight.w500
                  )
                ),
                Text(device.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.legacyDeleteDeviceDialog),
                          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: () async {
                                await onDelete();
                                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: (_) => EditLinkedDeviceScreen(
                    device: device,
                    /*navigationContract: navigationContract*/
                  )),
                );},
                icon: Icon(
                  Icons.edit_outlined,
                  color: Colors.white,
                ),
              ),
            ),
          ]
        ],
      ),
    );
  }
}