import 'package:flutter/material.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/views/widgets/bottom_sheets/asset_detail_bottom_sheet.dart';
import 'package:test_sa/views/widgets/qr/asset_scan_qr.dart';

import '../../../models/device/asset.dart';
import '../../../new_views/app_style/app_color.dart';

class AssetPicker extends StatelessWidget {
  final Function(Asset)? onPick;
  final Asset? device;
  final bool editable;
  final bool showAssetInfo;
  final Color? borderColor;
  final bool forPPM;
  final bool showLoading;

  const AssetPicker({Key? key, this.editable = true, this.device, this.onPick,this.borderColor, this.showAssetInfo = true, this.forPPM = false, this.showLoading = false}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        if (device == null)
          Container(
            height: 50,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: AppColor.blueStatus(context),
              borderRadius: BorderRadius.circular(10),
              //  boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.03), blurRadius: 14)],
            ),
            padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth, vertical: 8.toScreenHeight),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                "scan_asset".toSvgAsset(height: 22, fit: BoxFit.fitHeight, color: context.isDark ? AppColor.neutral20 : Colors.white),
                8.width,
                "Scan or Pick Asset".bodyText(context).custom(color: context.isDark ? AppColor.neutral20 : Colors.white),
              ],
            ),
          ).onPress(() async {
            Asset? device = await Navigator.of(context).push(MaterialPageRoute(builder: (context)=>AssetScanQr(title: context.translation.assetScan,))) as Asset?;
            if (device != null) {
              onPick!(device);
            }
          })
        else
          Container(
            height: 50,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(10), border: Border.all(color:borderColor?? AppColor.blueStatus(context), width: 2),
              //  boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.03), blurRadius: 14)],
            ),
            padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth, vertical: 8.toScreenHeight),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                "scan_asset".toSvgAsset(height: 22, fit: BoxFit.fitHeight, color: context.isDark ? AppColor.neutral20 : AppColor.neutral120),
                8.width,
                "Re-Scan or Pick Asset".bodyText(context).custom(color: context.isDark ? AppColor.neutral20 : AppColor.black20),
              ],
            ),
          ).onPress(() async {
            Asset? device = await Navigator.of(context).push(MaterialPageRoute(builder: (context)=>AssetScanQr(title: context.translation.assetScan,))) as Asset?;
            if (device != null) {
              onPick!(device);
            }
          }),
        if (device != null && showAssetInfo)
          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: showLoading ? Colors.white : const Color(0xffF4F6FC),
              borderRadius: BorderRadius.circular(12),
              border: Border.all(
                color: const Color(0xff212936).withOpacity(.03),
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Row(
                  children: [
                    Text(
                      device?.modelDefinition?.assetName?.cleanupWhitespace.capitalizeFirstOfEach ?? "",
                      style: TextStyle(
                        fontSize: 14.toScreenWidth,
                        fontWeight: FontWeight.w500,
                        fontStyle: FontStyle.normal,
                        color: Colors.black87,
                        decoration: TextDecoration.none,
                      ),
                    ).toShimmer(isShow: showLoading).expanded,
                    const Icon(
                      Icons.info,
                      color: Color(0xff7D859A),
                      size: 20,
                    ),
                  ],
                ),
                8.height,
                "${context.translation.assetNo}: ${device!.assetNumber}".bodyText2(context).toShimmer(isShow: showLoading),
                2.height,
                //   "${context.translation.manufacture}: ${device.modelDefinition?.manufacturerName}".bodyText(context),
                "${context.translation.model}: ${device!.modelDefinition?.modelName}".bodyText2(context).toShimmer(isShow: showLoading),
                //   "${context.translation.serialNumber}: ${device.assetNumber}".bodyText(context),
                // const Divider().defaultStyle(context),
                // "${context.translation.department}: ${device.department?.departmentName}".bodyText(context),
                // "${context.translation.site}: ${device.site?.custName}".bodyText(context),
              ],
            ),
          ).onPress(() {
            showModalBottomSheet(
              context: context,
              isScrollControlled: true,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.vertical(
                  top: Radius.circular(20),
                ),
              ),
              clipBehavior: Clip.antiAliasWithSaveLayer,
              builder: (BuildContext context) => AssetDetailBottomSheet(device),
            );
          }).paddingOnly(top: 16),
      ],
    );
  }
}