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

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

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

    final theme = ref.watch(themePortProvider);

    return PageLayout(
      title: context.translate(I18n.legacyPersonalData),
      body: Container(
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(horizontal: 48, vertical: 10),
          big: EdgeInsets.symmetric(horizontal: 47, vertical: 8)
        ),
        child: SingleChildScrollView(child: 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: 18, big: 16)),
            Text(context.translate(I18n.emailLabel),
              style: TextStyle(fontSize: SizeUtils.getByScreen(small: 14, big: 13))
            ),
            Text(state.user?.email ?? '',
              style: TextStyle(fontSize: SizeUtils.getByScreen(small: 18, big: 17))
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 24, big: 22)),
            CustomTextField(
              controller: vm.nameController,
              hint: state.user?.firstName ?? '',
              label: context.translate(I18n.firstNameLabel),
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 24, big: 22)),
            CustomTextField(
              controller: vm.phoneController,
              hint: state.user?.phone ?? '',
              label: context.translate(I18n.phoneLabel),
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 24, big: 22)),
            CustomTextField(
              controller: vm.emailController,
              hint: state.user?.email ?? '',
              label: context.translate(I18n.emailLabel),
            ),
          ],
        ))
      ),
      footer: PrimaryButton(
        onPressed: vm.updateUser,
        text: context.translate(I18n.legacySubmit),
        color: Color(0xFF588EA5)
      ),
    );
  }
}