import 'package:legacy_shared/src/data/models/entities/device_entity.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:flutter_svg/flutter_svg.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 EditLinkedDeviceScreen extends ConsumerWidget {
  //final NavigationContract navigationContract;
  final DeviceEntity device;

  const EditLinkedDeviceScreen({super.key, required this.device /*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.legacyEditDeviceTitle),
      showEdit: true,
      onEditChange: vm.toggleIsEditing,
      body: body
    );*/
      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: [
                  IconButton(onPressed: () {Navigator.pop(context);},
                    icon: Icon(Icons.arrow_back)),
                  Center(
                    child: Text(context.translate(I18n.legacyEditDeviceTitle),
                      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: 48, vertical: 10),
                  big: EdgeInsets.symmetric(horizontal: 47, vertical: 8)
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Stack(
                        children: [
                          Center(child: SvgPicture.asset('assets/images/ui/profile.svg')),
                          Center(child: SizedBox(
                            width: 160,
                            height: 160,
                            child: Align(alignment: Alignment.bottomRight,
                              child: IconButton(
                                onPressed: (){},
                                icon: Container(
                                  decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    color: Color(0xFFCAC9C9)
                                  ),
                                  padding: EdgeInsets.all(8),
                                  child: Icon(
                                    Icons.edit_outlined,
                                    color: Colors.white,
                                    size: SizeUtils.getByScreen(small: 32, big: 30),
                                  ),
                                ),
                              )
                            )
                          ))
                        ],
                      ),
                      SizedBox(height: SizeUtils.getByScreen(small: 24, big: 22)),
                      CustomTextField(
                        controller: vm.deviceNameController,
                        hint: device.carrierName,
                        label: context.translate(I18n.legacyName),
                      )
                    ],
                  ),
                  PrimaryButton(
                    onPressed: (){vm.updateDevice(device);},
                    text: context.translate(I18n.legacySave),
                    color: Color(0xFF588EA5)
                  )
                ],
              ))
            ),
          ],
        )
      ),
    );
  }
}