import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stacked/stacked.dart';
import 'package:yimaru_app/ui/common/app_colors.dart';
import 'package:yimaru_app/ui/common/ui_helpers.dart';
import 'package:yimaru_app/ui/widgets/custom_elevated_button.dart';
import 'package:yimaru_app/ui/views/onboarding/onboarding_viewmodel.dart';
import 'package:yimaru_app/ui/widgets/custom_small_radio_button.dart';
import 'package:yimaru_app/ui/widgets/onboarding_app_bar.dart';

class FirstWelcome extends ViewModelWidget<OnboardingViewModel> {
  const FirstWelcome({super.key});

  @override
  Widget build(BuildContext context, OnboardingViewModel viewModel) =>
      _buildScaffoldWrapper(viewModel);

  Widget _buildScaffoldWrapper(OnboardingViewModel viewModel) => Scaffold(
        backgroundColor: kcBackgroundColor,
        body: _buildScaffold(viewModel),
      );

  Widget _buildScaffold(OnboardingViewModel viewModel) => Stack(
        children: _buildScaffoldChildren(viewModel),
      );

  List<Widget> _buildScaffoldChildren(OnboardingViewModel viewModel) => [
        _buildBackground(),
        _buildColumnWrapper(),
        _buildContinueButtonWrapper(viewModel)
      ];

  Widget _buildBackground() => Image.asset(
        'assets/images/onboarding_1.png',
        fit: BoxFit.fill,
        width: double.maxFinite,
        height: double.maxFinite,
      );

  Widget _buildColumnWrapper() => Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15),
        child: _buildColumn(),
      );

  Widget _buildColumn() => Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: _buildUpperColumnChildren(),
      );

  List<Widget> _buildUpperColumnChildren() => [
        verticalSpaceMassive,
        _buildIcon(),
        verticalSpaceMedium,
        _buildTitle(),
      ];

  Widget _buildIcon() => SvgPicture.asset('assets/icons/logo.svg');

  Widget _buildTitle() => const Text(
        'Small daily practice. Big lifelong results.',
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 30,
          color: kcWhiteColor,
          fontWeight: FontWeight.w600,
        ),
      );

  Widget _buildContinueButtonWrapper(OnboardingViewModel viewModel) => Align(
        alignment: Alignment.bottomCenter,
        child: _buildButtonContainer(viewModel),
      );

  Widget _buildButtonContainer(OnboardingViewModel viewModel) => Padding(
        padding: const EdgeInsets.only(bottom: 50, right: 50, left: 50),
        child: _buildContinueButton(viewModel),
      );

  Widget _buildContinueButton(OnboardingViewModel viewModel) =>
      CustomElevatedButton(
        height: 55,
        icon: true,
        borderRadius: 12,
        text: 'Start Learning',
        onTap: () => viewModel.next(),
        backgroundColor: kcWhiteColor,
        foregroundColor: kcPrimaryColor,
      );
}
