import 'dart:io';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:dotted_border/dotted_border.dart';
import 'package:e_commerce_training/res/R.dart';
import 'package:e_commerce_training/src/model/repository/app_repository.dart';
import 'package:e_commerce_training/src/page/rate_product/rate_product.dart';
import 'package:e_commerce_training/src/util/util.dart';
import 'package:e_commerce_training/src/widget/custom_appbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:image_picker/image_picker.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:smooth_star_rating/smooth_star_rating.dart';
import 'package:easy_localization/easy_localization.dart';

enum ImageSourceType { gallery, camera }

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

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

class _RateProductPageState extends State<RateProductPage> {
  File? _image;
  var imagePicker;
  String title = "Bio Island DHA Cho Bà Bầu 60 Viên";
  String thumb =
      "https://cdn.chiaki.vn/unsafe/0x900/left/top/smart/filters:quality(90)/https://chiaki.vn/upload/product/2017/07/bio-island-dha-cho-ba-bau-60-vien-5977fba4e6ecd-26072017091708.png";
  late RateProductCubit _cubit;
  TextEditingController commentController = TextEditingController();
  RefreshController _refreshController = RefreshController();

  @override
  void initState() {
    AppRepository repository = AppRepository();
    _cubit = RateProductCubit(repository);
    imagePicker = ImagePicker();
    // TODO: implement initState
    super.initState();
  }

  List<String> fruits = [
    R.string.hopeless.tr(),
    R.string.dissatisfaction.tr(),
    R.string.unsatisfied.tr(),
    R.string.normal.tr(),
    R.string.satisfied.tr(),
    R.string.extremely_satisfied.tr()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: R.color.white,
      appBar: appBar(context, R.string.evaluate.tr(), rightIcons: [MdiIcons.cartOutline]),
      body: BlocProvider(
        create: (BuildContext context) => _cubit,
        child: BlocConsumer<RateProductCubit, RateProductState>(
          listener: (context, state) {
            if (state is RateProductFailure) Util.showErrorSnackBar(context, state.error);
            if (!(state is RateProductLoading)) _refreshController.refreshCompleted();
          },
          builder: (context, state) {
            return SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        CachedNetworkImage(
                          imageUrl: thumb,
                          height: 120.h,
                          width: 120.h,
                        ),
                        Expanded(
                          child: Text(
                            title,
                            style: TextStyle(
                              fontSize: 18.sp,
                              fontWeight: FontWeight.w700,
                            ),
                            textAlign: TextAlign.start,
                            maxLines: 2,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Divider(
                    color: R.color.grey500,
                  ),
                  SizedBox(
                    height: 8,
                  ),
                  Text("${fruits[_cubit.rating]}", style: TextStyle(fontSize: 18.sp, fontWeight: FontWeight.w400, color: R.color.black),),
                  SizedBox(
                    height: 8,
                  ),
                  RatingBar.builder(
                    itemSize: 40.h,
                    initialRating: _cubit.rating.toDouble(),
                    minRating: 1,
                    direction: Axis.horizontal,
                    itemCount: 5,
                    itemPadding: EdgeInsets.symmetric(horizontal: 2.0),
                    itemBuilder: (context, index) =>
                        Icon(
                          //index < _cubit.rating ?
                          Icons.star,
                          //: Icons.star_border,
                          color: R.color.orange,
                        ),
                    onRatingUpdate: (value) {
                      // print(rating)
                      _cubit.changeRating(value.toInt());
                    },
                  ),
                  Padding(
                    padding: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                    child: SingleChildScrollView(
                      scrollDirection: Axis.vertical,
                      reverse: true,
                      child: TextField(
                        textInputAction: TextInputAction.go,
                        maxLines: 1,
                        expands: false,
                        controller: commentController,
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.symmetric(vertical: 80, horizontal: 10),
                          filled: true,
                          fillColor: R.color.white,
                          hintText: R.string.share_feelings.tr(),
                          border: OutlineInputBorder(
                            borderSide: BorderSide(color: R.color.grey, width: 1),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                color: R.color.grey, width: 0.5
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),

                  Container(
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
                    alignment: Alignment.centerLeft,
                    child: GestureDetector(
                      onTap: () async {
                        XFile image = await imagePicker.pickImage(source: ImageSource.gallery);
                        setState(() {
                          _image = File(image.path);
                        });
                      },
                      child: Container(
                        width: 120.w,
                        height: 120.w,
                        child: _image != null
                            ? Image.file(
                          _image!,
                          width: 120.w,
                          height: 120.w,
                          fit: BoxFit.fitHeight,
                        )
                            : DottedBorder(
                          color: R.color.grey500,
                          radius: Radius.circular(5),
                          borderType: BorderType.RRect,
                          dashPattern: [3, 3],
                          child: Center(
                            child: Icon(
                              Icons.camera_alt,
                              color: R.color.black.withOpacity(0.4),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
      bottomNavigationBar: Padding(
          padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
          child: Container(
            height: 60.h,
            width: double.infinity,
            decoration: BoxDecoration(
              color: R.color.blue,
              borderRadius: BorderRadius.circular(3),
            ),
            child: Center(
              child: Text(
                R.string.sent.tr(),
                style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.bold, color: R.color.white),
              ),
            ),
          )),
    );
  }
}
