import 'package:account/src/features/change_password/presentation/state/change_password_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 ChangePasswordScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

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

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

    final theme = ref.watch(themePortProvider);

    return PageLayout(
      title: context.translate(I18n.legacyChangePassword),
      body: Container(
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(horizontal: 28, vertical: 10),
          big: EdgeInsets.symmetric(horizontal: 27, vertical: 8)
        ),
        child: SingleChildScrollView(child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CustomTextField(
              controller: vm.currentPasswordController,
              hint: '********',
              label: context.translate(I18n.password),
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 24, big: 22)),
            CustomTextField(
              controller: vm.newPasswordController,
              hint: '********',
              label: context.translate(I18n.newPassword),
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 24, big: 22)),
            CustomTextField(
              controller: vm.repeatPasswordController,
              hint: '********',
              label: context.translate(I18n.repeatPassword),
            ),
            if (state.errorMessage.isNotEmpty) ...[
              const SizedBox(height: 8),
              Text(
                state.errorMessage,
                textAlign: TextAlign.center,
                style: const TextStyle(
                  color: Color.fromRGBO(239, 17, 17, 1),
                  fontSize: 12,
                ),
              ),
            ],
          ],
        ))
      ),
      footer: PrimaryButton(
        onPressed: () async {
          final bool res = await vm.changePassword();
          if (res){
            Navigator.pop(context);
          }
        },
        text: context.translate('OK'),
        color: Color(0xFF588EA5)
      ),
    );
  }
}