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

import '../../app.dart';
import 'widgets/coupon_code_form_field.dart';

class CartOrderPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<CartController>(
      init: CartController(),
      builder: (cc) => Container(
        color: Colors.white,
        child: LoaderOverlay(
          useDefaultLoading: false,
          overlayColor: Colors.transparent,
          overlayWidget: CustomLoader(),
          child: Scaffold(
            backgroundColor: Colors.white, //ThemeColor.scaffoldBckColor,
            appBar: CustomAppbarWidget(
              leading: AppBarBackBtn(
                callback: cc.onBackTapped,
              ),
            ),
            body: OrderBody(),
          ),
        ),
      ),
    );
  }
}

class OrderDetailWidget extends StatelessWidget {
  const OrderDetailWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GetX<CartController>(
      init: CartController(),
      builder: (cc) {
        final CartModel? cartModel = cc.state.cartModel.value;
        return Container(
          // padding: const EdgeInsets.only(left: 30, right: 20),
          color: Colors.white,
          child: cartModel != null
              ? Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('total_price'.tr, style: _pageTextStyle(12.sp, false)),
                        // Text('', style: _pageTextStyle(12.sp, false)),
                        Text(cartModel.formattedSubTotal, style: _pageTextStyle(12.sp)),
                      ],
                    ),
                    AppTheme.appSizeDivider20H,
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('discount'.tr, style: _pageTextStyle(12.sp, false)),
                        // Text('', style: _pageTextStyle(12.sp, false)),
                        Text(cartModel.formattedDiscount, style: _pageTextStyle(12.sp)),
                      ],
                    ),
                    AppTheme.appSizeDivider20H,
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('delivery'.tr, style: _pageTextStyle(12.sp, false)),
                        cc.state.cartModel.value!.shippingRate != null
                            ? Text(
                                cc.state.cartModel.value!.shippingRate!.formattedPrice,
                                style: _pageTextStyle(12.sp),
                              )
                            : Text(
                                '0.00 m.',
                                style: _pageTextStyle(12.sp),
                              ),
                      ],
                    ),
                    AppTheme.appSizeDivider20H,
                    AppTheme.appColorDivider,
                    AppTheme.appSizeDivider20H,
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('grand_total'.tr, style: _pageTextStyle(12.sp, false)),
                        Text(cartModel.formattedGrandTotal, style: _pageTextStyle(12.sp)),
                      ],
                    ),
                    AppTheme.appSizeDivider20H,
                    CouponCodeTextFormField(),
                    AppTheme.appSizeDivider20H,
                    (cc.state.selectedPaymentMethod.value != null && cc.state.selectedShippingRate.value != null)
                        ? ColoredButton(
                            title: 'checkout_complete'.tr,
                            btnColor: ThemeColor.mainColor,
                            callback: () => cc.saveOrder(context),
                          )
                        : SizedBox.shrink(),
                    AppTheme.appSizeDivider20H,
                  ],
                )
              : Center(
                  child: Text('error'.tr),
                ),
        );
      },
    );
  }

  TextStyle _pageTextStyle(double fontSize, [isBold = true]) {
    return new TextStyle(
      fontSize: fontSize,
      fontWeight: isBold ? FontWeight.bold : FontWeight.normal,
      color: ThemeColor.color3A3A3A,
    );
  }
}

class OrderBody extends StatelessWidget {
  OrderBody();

  @override
  Widget build(BuildContext context) {
    return GetX<CartController>(
      init: CartController(),
      builder: (cc) => Padding(
        padding: const EdgeInsets.all(8.0),
        child: SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 16.w),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              AppTheme.appSizeDivider10H,
              Text(
                'delivery'.tr,
                style: AppTheme.subHeaderTxtStyle,
              ),
              AppTheme.appSizeDivider10H,
              AppTheme.appColorDivider,
              AppTheme.appSizeDivider10H,
              AddressList(
                title: 'client_address'.tr,
                isSelectable: true,
                callback: (address) => cc.onAddressSelected(context, address),
              ),
              cc.state.shippingRates.isNotEmpty
                  ? Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(height: 15.h),
                        Text(
                          'delivery'.tr,
                          style: AppTheme.subHeaderTxtStyle,
                        ),
                        SizedBox(height: 15.h),
                        Container(
                          padding: const EdgeInsets.symmetric(horizontal: 8),
                          decoration: ShapeDecoration(
                            shape: RoundedRectangleBorder(
                              side: BorderSide(color: ThemeColor.colorC4C4C4),
                              borderRadius: BorderRadius.all(Radius.circular(5.0)),
                            ),
                          ),
                          child: DropdownButtonHideUnderline(
                            child: DropdownButton<ShippingRateModel>(
                              isExpanded: true,
                              borderRadius: BorderRadius.circular(16),
                              hint: Text('select_shipping_method'.tr, style: AppTheme.selectedTxtStyle),
                              value: cc.state.selectedShippingRate.value,
                              style: AppTheme.selectedTxtStyle,
                              items: cc.state.shippingRates.map((ShippingRateModel value) {
                                return DropdownMenuItem<ShippingRateModel>(
                                  value: value,
                                  child: Text(
                                    value.carrierTitle,
                                    style: AppTheme.selectedTxtStyle,
                                  ),
                                );
                              }).toList(),
                              onChanged: (newValue) => cc.onShippingRateChange(newValue, context),
                            ),
                          ),
                        ),
                        SizedBox(height: 20.h),
                      ],
                    )
                  : SizedBox.shrink(),
              cc.state.paymentMethods.isNotEmpty
                  ? Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'payment_method'.tr,
                          style: AppTheme.subHeaderTxtStyle,
                        ),
                        AppTheme.appSizeDivider10H,
                        Container(
                          padding: const EdgeInsets.symmetric(horizontal: 8),
                          decoration: ShapeDecoration(
                            shape: RoundedRectangleBorder(
                              side: BorderSide(color: ThemeColor.colorC4C4C4),
                              borderRadius: BorderRadius.all(Radius.circular(5.0)),
                            ),
                          ),
                          child: DropdownButtonHideUnderline(
                            child: DropdownButton<PaymentMethodModel>(
                              isExpanded: true,
                              borderRadius: BorderRadius.circular(16),
                              hint: Text('select_payment_method'.tr, style: AppTheme.selectedTxtStyle),
                              value: cc.state.selectedPaymentMethod.value,
                              style: AppTheme.selectedTxtStyle,
                              items: cc.state.paymentMethods.map((PaymentMethodModel value) {
                                return DropdownMenuItem<PaymentMethodModel>(
                                  value: value,
                                  child: Text(
                                    value.methodTitle,
                                    style: AppTheme.selectedTxtStyle,
                                  ),
                                );
                              }).toList(),
                              onChanged: (newValue) => cc.onPaymentMethodChange(newValue),
                            ),
                          ),
                        ),
                        AppTheme.appSizeDivider30H,
                        AppTheme.appSizeDivider20H,
                        OrderDetailWidget(),
                      ],
                    )
                  : SizedBox.shrink(),
              /*  cc.state.paymentMethods.isNotEmpty
                  ? ColoredButton(
                      title: 'checkout'.tr,
                      btnColor: ThemeColor.mainColor,
                      callback: () => cc.saveOrder(context),
                    )
                  : SizedBox.shrink(), */

              SizedBox(height: MediaQuery.of(context).padding.bottom + 0.02.sh),
            ],
          ),
        ),
      ),
    );
  }
}