Remever/lib/screens/create_card/create_screen.dart

import 'dart:math';

import 'package:auto_route/auto_route.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:remever/common/resources.dart';
import 'package:remever/common/widgets/typography.dart';
import 'package:remever/common/widgets/wspace.dart';
import 'package:remever/components/extensions/context.dart';
import 'package:remever/gen/assets.gen.dart';
import 'package:remever/router.gr.dart';
import 'package:remever/screens/collections/widgets/collection_progress_bar.dart';
import 'package:remever/screens/collections/widgets/learning_card.dart';
import 'package:remever/widgets/primary_button.dart';

@RoutePage()
class CreateScreen extends StatelessWidget {
  const CreateScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.gray_bg,
      appBar: _buildAppBar(),
      body: _buildMain(context),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      toolbarHeight: 66.h,
      backgroundColor: AppColors.white,
      shadowColor: Colors.transparent,
      title: AppTypography(
        'Создать карточку',
        type: SemiBold20px(),
        color: AppColors.body_text,
      ),
      centerTitle: true,
    );
  }

  Widget _buildMain(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16).r,
      child: Column(
        children: <Widget>[
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  const HSpace(16),
                  _filters(),
                  const HSpace(16),
                  AppTypography('Коллекция', type: Medium16px()),
                  const HSpace(4),
                  _buildCollection(context),
                  const HSpace(16),
                  AppTypography('Вопрос', type: Medium16px()),
                  const HSpace(4),
                  LearningCard(
                    index: 0,
                    type: CardType.CREATE,
                    onTextTap: () {
                      context.pushRoute(
                        CrudCollectionFullscreenField(
                          title: 'Вопрос',
                          hint: '',
                          height: 313,
                        ),
                      );
                    },
                  ),
                  const HSpace(16),
                  AppTypography('Ответ', type: Medium16px()),
                  LearningCard(
                    index: 1,
                    type: CardType.CREATE,
                    onTextTap: () {
                      context.pushRoute(
                        CrudCollectionFullscreenField(
                          title: 'Ответ',
                          hint: '',
                          height: 313,
                        ),
                      );
                    },
                  ),
                  revertCard(),
                ],
              ),
            ),
          ),
          _createBtn(),
          const HSpace(31),
        ],
      ),
    );
  }

  Widget revertCard() {
    return SizedBox(
      height: 52.h,
      child: Row(
        children: <Widget>[
          Center(
            child: Assets.icons.typeFlip2.image(height: 20.h, width: 20.w),
          ),
          const WSpace(2),
          Flexible(
            fit: FlexFit.tight,
            child: AppTypography(
              'Создать карточку-наоборот',
              type: Medium16px(),
            ),
          ),
          SizedBox(
            height: 20.h,
            width: 36.w,
            child: FittedBox(
              fit: BoxFit.contain,
              child: CupertinoSwitch(
                activeTrackColor: AppColors.primary,
                value: false,
                onChanged: (bool value) {},
              ),
            ),
          ),
        ],
      ),
    );
  }

  Row _filters() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        _buildFilterButton(AppColors.gray_bg, 'Запомнить', () {}),
        _buildFilterButton(AppColors.white, 'Держать в фокусе', () {}),
      ],
    );
  }

  Widget _createBtn() {
    return PrimaryButton(
      color: AppColors.primary,
      child: AppTypography(
        'Создать карточку',
        type: Medium14px(),
        color: AppColors.white,
      ),
      onTap: () {},
    );
  }

  ///
  /// Построение кнопки фильтра
  ///
  Widget _buildFilterButton(Color color, String title, void Function()? onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 158.h,
        height: 36.h,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(16)).r,
          color: color,
        ),
        child: Center(child: AppTypography(title, type: SemiBold14px())),
      ),
    );
  }

  Widget _buildCollection(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        constraints: BoxConstraints(minHeight: 66.h, maxHeight: 84.h),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12).r,
          color: AppColors.white,
        ),
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8).r,
        child: Row(
          children: <Widget>[_buildAvatar(), const WSpace(5), _buildInfo()],
        ),
      ),
    );
  }

  ///
  /// Построение основной информации
  ///
  Widget _buildInfo() {
    return SizedBox(
      width: 230.w,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          _buildTitle(),
          const HSpace(4),
          Row(
            children: <Widget>[
              Assets.icons.typeCards.image(
                height: 18.h,
                width: 18.w,
                color: AppColors.disabled,
              ),
              const WSpace(2),
              AppTypography(
                Random().nextInt(654).toString(),
                type: Regular14px(),
                color: AppColors.disabled,
              ),
            ],
          ),
          const HSpace(6),
          const CollectionProgressBar(),
        ],
      ),
    );
  }

  ///
  /// Название коллекции
  ///
  Widget _buildTitle() {
    return AppTypography(
      'Астрономия',
      type: Medium16px(),
      maxLines: 2,
      softWrap: true,
    );
  }

  ///
  /// Обложка коллекции
  ///
  Widget _buildAvatar() {
    return SizedBox.square(
      dimension: 50.r,
      child: DecoratedBox(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(image: Assets.images.img.provider()),
        ),
      ),
    );
  }
}