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 Function(List<Asset>)? onMultiAssetPick;
  final Function(int)? onAssetRemove;
  final Asset? device;
  final List<Asset> deviceList;
  final bool editable;
  final bool showAssetInfo;
  final bool showBorder;
  final Color? borderColor;
  final Color? buttonColor;
  final Color? iconColor;
  final Color? labelColor;
  final String? label;
  Color? backgroundColor;
  final bool forPPM;
  final bool showLoading;
  final bool enablePickManually;
  final bool multiSelection;

  AssetPicker(
      {Key? key,
      this.editable = true,
      this.device,
      this.deviceList = const [],
      this.onPick,
      this.onMultiAssetPick,
      this.onAssetRemove,
      this.borderColor,
      this.buttonColor,
      this.label,
      this.iconColor,
      this.labelColor,
      this.backgroundColor,
      this.showAssetInfo = true,
      this.showBorder = false,
      this.multiSelection = false,
      this.forPPM = false, this.enablePickManually = true,
      this.showLoading = false})
      : assert(
          multiSelection == false || onMultiAssetPick != null,
          'Cannot use multiple asset picker with single onPick Method\n'
          'Use onMultiAssetPick method instead.',
        ),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        if (device == null && deviceList.isEmpty)
          Container(
            height: 50,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: buttonColor ?? backgroundColor ?? AppColor.blueStatus(context),
              borderRadius: BorderRadius.circular(10),
                border: showBorder?Border.all(color: borderColor ?? AppColor.blueStatus(context), width: 2):null,
              //  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 :iconColor?? Colors.white),
                8.width,
               ' ${label??"Scan or Pick Asset"}'.bodyText(context).custom(color: context.isDark ? AppColor.neutral20 : labelColor?? Colors.white),
              ],
            ),
          ).onPress(() async {
            if (multiSelection) {
              List<Asset>? device = await Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => AssetScanQr(
                        title: context.translation.assetScan,
                        multiSelection: multiSelection,
                    enablePickManually:  enablePickManually,
                      ))) as List<Asset>?;
              if (device?.isNotEmpty ?? false) {
                onMultiAssetPick!(device!);
              }
            } else {
              Asset? device = await Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => AssetScanQr(
                        title: context.translation.assetScan,
                        multiSelection: multiSelection,
                    enablePickManually:  enablePickManually,
                      ))) 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 {
            if (multiSelection) {
              List<Asset>? device = await Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => AssetScanQr(
                        title: context.translation.assetScan,
                        multiSelection: multiSelection,
                    enablePickManually:  enablePickManually,
                      ))) as List<Asset>?;
              if (device?.isNotEmpty ?? false) {
                onMultiAssetPick!(device!);
              }
            } else {
              Asset? device = await Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => AssetScanQr(
                        title: context.translation.assetScan,
                        multiSelection: multiSelection,
                    enablePickManually:  enablePickManually,
                      ))) as Asset?;
              if (device != null) {
                onPick!(device);
              }
            }
          }),
        if (device != null && showAssetInfo) _assetInfoView(device!, context).paddingOnly(top: 16),
        if (deviceList.isNotEmpty && showAssetInfo)
          ListView.separated(
              shrinkWrap: true,
              padding: const EdgeInsets.only(top: 16),
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (cxt, index) => _assetInfoView(deviceList[index], context),
              separatorBuilder: (cxt, index) => 12.height,
              itemCount: deviceList.length)
      ],
    );
  }

  Widget _assetInfoView(Asset device, BuildContext context) {
    return 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,context: context).expanded,
              const Icon(
                Icons.info,
                color: Color(0xff7D859A),
                size: 20,
              ).onPress(() {
                showModalBottomSheet(
                  context: context,
                  isScrollControlled: true,
                  shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(20),
                    ),
                  ),
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  builder: (BuildContext context) => AssetDetailBottomSheet(device),
                );
              }),
              if (multiSelection) ...[
                4.width,
                const Icon(
                  Icons.delete_rounded,
                  color: Color(0xffF63939),
                  size: 20,
                ).onPress(() {
                  onAssetRemove!(device.id!.toInt());
                }),
              ]
            ],
          ),
          8.height,
          "${context.translation.assetNo}: ${device.assetNumber}".bodyText2(context).toShimmer(isShow: showLoading,context: context),
          2.height,
          //   "${context.translation.manufacture}: ${device.modelDefinition?.manufacturerName}".bodyText(context),
          "${context.translation.model}: ${device.modelDefinition?.modelName}".bodyText2(context).toShimmer(isShow: showLoading,context: context),
          //   "${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),
        ],
      ),
    );
  }
}