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

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

class ProductCharacteristicsWidget extends StatelessWidget {
  final ProductModel model;
  final ProductController pc;

  ProductCharacteristicsWidget({required this.model, required this.pc});
  @override
  Widget build(BuildContext context) {
    return GetX<ProductController>(
      init: ProductController(model),
      builder: (pc) {
        if (pc.state.isAdditionalInfoLoading.value) {
          return CustomLoader();
        }

        if (pc.state.hasAdditionalInfoError.value) {
          return Center(child: retryBuilder(() => pc.getProductAdditionalInfo()));
        }

        return ListView.builder(
          padding: EdgeInsets.only(
            left: 30.w,
            right: 30.w,
            top: 16,
            bottom: MediaQuery.of(context).padding.bottom,
          ),
          shrinkWrap: true,
          itemCount: pc.state.productAdditionalInfoList.length,
          itemBuilder: (_, int index) {
            final info = pc.state.productAdditionalInfoList[index];
            return Column(
              children: [
                AppTheme.appSizeDivider15H,
                RowTextBuilder(
                  descTxt: info.label,
                  valueTxt: Html(data: info.value),
                ),
                AppTheme.appSizeDivider15H,
                DashSeparator(color: ThemeColor.colorE5E5E5),
              ],
            );
          },
        );
      },
    );
  }
}

class RowTextBuilder extends StatelessWidget {
  final String descTxt;
  final Html valueTxt;

  RowTextBuilder({
    required this.descTxt,
    required this.valueTxt,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Text(
            descTxt,
            style: new TextStyle(
              color: ThemeColor.colorC4C4C4,
              fontSize: 12.sp,
            ),
            maxLines: 3,
            overflow: TextOverflow.ellipsis,
          ),
        ),
        Spacer(),
        Expanded(
          flex: 2,
          child: Align(child: valueTxt),
        ),
      ],
    );
  }
}
