import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/config/routes.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/widgets/button/default_button.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import 'package:mohem_flutter_app/widgets/dynamic_forms/dynamic_textfield_widget.dart';

class SurveyScreen extends StatefulWidget {
  const SurveyScreen({Key? key}) : super(key: key);

  @override
  _SurveyScreenState createState() => _SurveyScreenState();
}

class _SurveyScreenState extends State<SurveyScreen> {
  String reviewText = "";
  int _selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: MyColors.backgroundColor,
        body: Column(
          children: [
            Expanded(
                child: ListView(
              scrollDirection: Axis.vertical,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    124.height,
                    LocaleKeys.feedbackUserExperience.tr().toText19(),
                    27.height,
                    LocaleKeys.rateUI.tr().toText16(),
                    22.height,
                    Row(
                      children: [
                        RatingBar.builder(
                          initialRating: 3,
                          minRating: 1,
                          direction: Axis.horizontal,
                          allowHalfRating: true,
                          itemCount: 5,
                          itemPadding: EdgeInsets.symmetric(horizontal: 12),
                          itemBuilder: (context, _) => Icon(
                            Icons.star,
                            color: Colors.amber,
                          ),
                          onRatingUpdate: (rating) {},
                        )
                      ],
                    ).paddingOnly(left: 22, right: 22, top: 12, bottom: 12).objectContainerView(disablePadding: true),
                    39.height,
                    LocaleKeys.rateUI.tr().toText16(),
                    10.height,
                    GridView(
                      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 5, crossAxisSpacing: 7, mainAxisSpacing: 7),
                      physics: const NeverScrollableScrollPhysics(),
                      padding: const EdgeInsets.only(top: 0),
                      shrinkWrap: true,
                      children: [
                        optionUI("poor.svg", 0),
                        optionUI("bad.svg", 1),
                        optionUI("normal.svg", 2),
                        optionUI("good.svg", 3),
                        optionUI("xcellent.svg", 4),
                      ],
                    ),
                    27.height,
                    DynamicTextFieldWidget(
                      LocaleKeys.description.tr(),
                      LocaleKeys.typeHere.tr(),
                      lines: 3,
                    ),
                    150.height
                  ],
                ).paddingOnly(left: 21, right: 21),
              ],
            )),
            DefaultButton(LocaleKeys.submitSurvey.tr(), () async {}).insideContainer,
          ],
        ));
  }

  Widget optionUI(String icon, int index) {
   return (_selectedIndex == index
            ? SvgPicture.asset(
                'assets/images/' + icon,
                height: 32,
                width: 32,
              ).objectContainerBorderView(disablePadding: true, borderColor: MyColors.textMixColor, disableWidth: true, isAlignment: true)
            : SvgPicture.asset(
                'assets/images/' + icon,
                height: 32,
                width: 32,
              ).objectContainerView(
                disablePadding: true,
              ))
        .onPress(() {
      _selectedIndex = index;
      setState(() {});
    });
  }
}