import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../app.dart';

class ProductReviewWidget extends StatelessWidget {
  final ProductModel model;
  ProductReviewWidget({required this.model});
  @override
  Widget build(BuildContext context) {
    return GetX<ProductController>(
      init: ProductController(model),
      builder: (pc) => SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              AppTheme.appSizeDivider20H,
              Text(
                'comments'.tr,
                style: new TextStyle(fontSize: 12.sp, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 20.h),

              // Form
              Form(
                key: pc.state.reviewFormKey,
                child: TextFormField(
                  controller: pc.state.reviewCtrl,
                  focusNode: pc.state.reviewFocusNode,
                  maxLines: 5,
                  decoration: new InputDecoration(
                    labelText: 'product_review'.tr,
                    labelStyle: new TextStyle(color: ThemeColor.colorC4C4C4),
                    fillColor: Colors.white,
                    alignLabelWithHint: true,
                    border: _textFieldBorder,
                    focusedBorder: _textFieldBorder,
                  ),
                  validator: (value) {
                    if (value == null || value.trim().length == 0) return 'enter_comment'.tr;
                    return null;
                  },
                ),
              ),
              SizedBox(height: 20.h),
              Column(
                children: [
                  Center(
                    child: RatingBar.builder(
                      initialRating: pc.state.rating.value,
                      minRating: 1,
                      itemSize: 30.h,
                      itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
                      itemBuilder: (context, _) => Icon(
                        Icons.star,
                        color: Colors.amber,
                      ),
                      onRatingUpdate: (rating) => pc.onReviewRatingUpdate(rating),
                    ),
                  ),
                  pc.state.hasRatingError.value
                      ? Center(
                          child: Column(
                            children: [
                              SizedBox(height: 16.h),
                              Text(
                                'enter_star'.tr,
                                style: TextStyle(
                                  color: ThemeColor.mainColor,
                                  fontSize: 12.sp,
                                ),
                              )
                            ],
                          ),
                        )
                      : SizedBox.shrink(),
                ],
              ),
              AppTheme.appSizeDivider20H,
              ColoredButton(
                title: 'leave_feedback'.tr,
                btnColor: ThemeColor.mainColor,
                callback: () => pc.onSubmitReviewTapped(context),
              ),
              AppTheme.appSizeDivider20H,

              // reviews
              ListView.separated(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: pc.state.reviews.length,
                itemBuilder: (context, index) {
                  final review = pc.state.reviews[index];
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Text(
                            review.name,
                            style: new TextStyle(
                              color: ThemeColor.color3A3A3A,
                              fontSize: 14.sp,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Spacer(),
                          Icon(Icons.star, color: ThemeColor.mainColor, size: 22.sp),
                          SizedBox(width: 4),
                          Text(
                            review.rating,
                            style: new TextStyle(
                              color: ThemeColor.mainColor,
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: 12),
                      Text(
                        review.createdAt,
                        style: new TextStyle(
                          color: ThemeColor.colorC4C4C4,
                          fontSize: 12.sp,
                        ),
                      ),
                      SizedBox(height: 12),
                      Text(
                        review.comment,
                        style: new TextStyle(
                          color: ThemeColor.color3A3A3A,
                          fontSize: 12.sp,
                        ),
                      ),
                    ],
                  );
                },
                separatorBuilder: (context, _) {
                  return Column(
                    children: [
                      AppTheme.appSizeDivider20H,
                      Divider(thickness: 1.2),
                      AppTheme.appSizeDivider20H,
                    ],
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  final InputBorder _textFieldBorder = new OutlineInputBorder(
    borderRadius: new BorderRadius.circular(8.0),
    borderSide: new BorderSide(color: ThemeColor.grey.withOpacity(0.90)),
  );
}
