import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:functions/src/features/functions/widgets/call_watch_dialog.dart';
import 'package:navigation/navigation.dart';
import 'package:sf_localizations/sf_localizations.dart';
import 'package:utils/utils.dart';

class FunctionsScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    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: [
                    IconButton(onPressed: () {Navigator.pop(context);},
                      icon: Icon(Icons.arrow_back)),
                    Center(
                      child: Text(context.translate('Device Features'),
                        style: TextStyle(
                          fontSize: SizeUtils.getByScreen(small: 28, big: 27)
                        ),
                      )
                    )
                  ],
                ),
              ),
              SizedBox(height: SizeUtils.getByScreen(small: 30, big: 28)),
              Expanded(child: SingleChildScrollView(child: Container(
                padding: SizeUtils.getByScreen(
                  small: EdgeInsets.symmetric(horizontal: 22, vertical: 10),
                  big: EdgeInsets.symmetric(horizontal: 21, vertical: 8)
                ),
                child: Column(
                  children: [
                    AppSectionButton(
                      onPressed: (){navigationContract.pushTo(AppRoutes.remoteConnection);},
                      icon: SFIcons.connection,
                      text: context.translate(I18n.remoteConnection)
                    ),
                    SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
                    AppSectionButton(
                      onPressed: (){},
                      icon: SFIcons.calendarCircle,
                      text: context.translate(I18n.calendar)
                    ),
                    SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
                    AppSectionButton(
                      onPressed: (){navigationContract.pushTo(AppRoutes.contacts);},
                      icon: SFIcons.contactsCircle,
                      text: context.translate(I18n.contacts)
                    ),
                    SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
                    AppSectionButton(
                        onPressed: (){},
                        icon: SFIcons.doNotDisturbCircle,
                        text: context.translate(I18n.doNotDisturb)
                    ),
                    SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
                    AppSectionButton(
                        onPressed: (){},
                        icon: SFIcons.videoCallCircle,
                        text: context.translate(I18n.videoCall)
                    ),
                    SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
                    AppSectionButton(
                        onPressed: (){},
                        icon: SFIcons.healthCircle,
                        text: context.translate(I18n.health)
                    ),
                    SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
                    AppSectionButton(
                        onPressed: (){navigationContract.pushTo(AppRoutes.activityMeter);},
                        icon: SFIcons.healthCircle,
                        text: context.translate(I18n.activityMeter)
                    ),
                    SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
                    AppSectionButton(
                        onPressed: (){},
                        icon: SFIcons.rewardsCircle,
                        text: context.translate(I18n.rewards)
                    ),
                    SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
                    AppSectionButton(
                      onPressed: (){showDialog(context: context, builder: (context)=>Dialog(
                        child: CallWatchDialog()
                      ));},
                      icon: Icons.call_outlined,
                      text: context.translate(I18n.callWatch)
                    ),
                    SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
                    AppSectionButton(
                        onPressed: (){},
                        icon: SFIcons.screenTime,
                        text: context.translate(I18n.appsUse)
                    ),
                    SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
                    AppSectionButton(
                        onPressed: (){},
                        icon: Icons.app_registration_sharp,
                        text: context.translate(I18n.appsSurveillance)
                    ),
                    SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
                    AppSectionButton(
                        onPressed: (){},
                        icon: SFIcons.friendsCircle,
                        text: context.translate(I18n.makeFriends)
                    ),
                    SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
                    AppSectionButton(
                        onPressed: (){navigationContract.pushTo(AppRoutes.locateDevice);},
                        icon: SFIcons.locateSfCircle,
                        text: context.translate(I18n.locateWatch)
                    ),
                  ],
                ),
              ))),
            ],
          )
      ),
    );
  }
}

class AppSectionButton extends ConsumerWidget {

  final GestureTapCallback onPressed;
  final IconData icon;
  final String text;

  const AppSectionButton({
    required this.onPressed,
    required this.icon,
    required this.text,
  });

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

    return GestureDetector(
      onTap: onPressed,
      child: Container(
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(horizontal: 22, vertical: 14),
          big: EdgeInsets.symmetric(horizontal: 21, vertical: 12)
        ),
        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: 0, big: 0)),
              child: Icon(icon,
                size: SizeUtils.getByScreen(small: 52, big: 48),
                color: Color(0xFF588EA5),
                weight: 30,
              ),
            ),
            SizedBox(width: SizeUtils.getByScreen(small: 16, big: 15)),
            Expanded(
              child: Text(context.translate(text),
                style: TextStyle(
                  fontSize: SizeUtils.getByScreen(small: 18, big: 19),
                  fontWeight: FontWeight.w500
                )
              )
            )
          ],
        ),
      )
    );
  }
}