// import 'package:account/src/features/linked_devices/presentation/app_users_screen.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:functions/src/features/remote_connection/presentation/state/remote_connection_view_model.dart';
import 'package:navigation/navigation.dart';
import 'package:sf_localizations/sf_localizations.dart';
import 'package:utils/utils.dart';
import 'package:legacy_shared/legacy_shared.dart';

class RemoteCameraScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

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

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

    final viewModel = ref.read(remoteConnectionViewModelProvider.notifier);
    final viewState = ref.watch(remoteConnectionViewModelProvider);

    return PageLayout(
      title: context.translate('Remote camera'),
      body: Expanded(child: GridView.count(
        primary: false,
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
          big: EdgeInsets.symmetric(horizontal: 23, vertical: 11)
        ),
        crossAxisSpacing: 11,
        mainAxisSpacing: 11,
        crossAxisCount: 3,
        childAspectRatio: 0.8,
        children: List<Widget>.generate(12, (int index)=>
          Container(
            height: SizeUtils.getByScreen(small: 110, big: 105),
            width: SizeUtils.getByScreen(small: 60, big: 58),
            color: Colors.grey[200],
            child: SvgPicture.asset('assets/images/ui/face.svg'),
          )
        ),
      )),
      footer: Container(
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(vertical: 12, horizontal: 26),
          big: EdgeInsets.symmetric(vertical: 10, horizontal: 25)
        ),
        child: PrimaryButton(
          onPressed: () async {
            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: Center(child: Text(context.translate('Loading photo...'),
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: SizeUtils.getByScreen(small: 26, big: 25)),
                )),
              ),
            ));
            await viewModel.takePicture();
            Navigator.pop(context);
          },
          text: context.translate('Take a picture'),
          color: Color(0xFF588EA5),
          height: SizeUtils.getByScreen(small: 36, big: 35),
        ),
      )
    );
  }
}