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/item_views/info_header_widget.dart';
import 'package:test_sa/views/widgets/item_views/info_text_widget.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';
import 'asset_detail_page.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;
  bool overWriteStyle;
  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.overWriteStyle = false,
      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 = true,
      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)
          //             showBorder: true,
          //             // buttonColor: AppColor.white936,
          //             buttonColor: AppColor.dropDownBackground(context),
          Container(
            height: 50.toScreenHeight,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: overWriteStyle ? AppColor.dropDownBackground(context) : buttonColor ?? backgroundColor ?? AppColor.primary10,
              borderRadius: BorderRadius.circular(10),
              border: showBorder
                  ? Border.all(
                      color: overWriteStyle ? AppColor.border2Color(context) : borderColor ?? AppColor.border2Color(context),
                    )
                  : 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: AppColor.icon2Color(context)),
                8.width,
                ' ${label ?? "Scan or Pick Asset"}'.bodyText(context).custom(color: AppColor.labelTextStyleColor(context)),
              ],
            ),
          ).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: overWriteStyle ? AppColor.dropDownBackground(context) : buttonColor ?? backgroundColor ?? AppColor.primary10,
              borderRadius: BorderRadius.circular(10),
              border: showBorder
                  ? Border.all(
                      color: overWriteStyle ? AppColor.border2Color(context) : borderColor ?? AppColor.border2Color(context),
                    )
                  : null,
              // border: showBorder ? Border.all(color: borderColor ?? AppColor.border2Color(context), width: 1) : null,
            ),
            padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth, vertical: 8.toScreenHeight),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                "scan_asset".toSvgAsset(height: 22, fit: BoxFit.fitHeight, color: AppColor.iconColor(context)),
                8.width,
                "Re-Scan or Pick Asset".bodyText(context).custom(color: AppColor.labelTextStyleColor(context)),
              ],
            ),
          ).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(
        //AppColor.background(context)
        color: showLoading ? Colors.white : AppColor.background(context),
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: overWriteStyle ? AppColor.border2Color(context) : borderColor ?? AppColor.border2Color(context)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              InfoHeaderWidget(
                device.modelDefinition?.assetName?.cleanupWhitespace.capitalizeFirstOfEach ?? "",
              ).toShimmer(isShow: showLoading, context: context).expanded,
              const Icon(Icons.open_in_new_rounded, color: AppColor.primary10, size: 20).onPress(() {
                Navigator.of(context).pushNamed(AssetDetailPage.id, arguments: device.id);
              }),
              if (multiSelection) ...[
                4.width,
                "delete".toSvgAsset().onPress(() {
                  onAssetRemove!(device.id!.toInt());
                }),
              ]
            ],
          ),
          8.height,
          InfoTextWidget(label: context.translation.assetNo, value: device.assetNumber).toShimmer(isShow: showLoading, context: context),
          // 2.height,
          //   "${context.translation.manufacture}: ${device.modelDefinition?.manufacturerName}".bodyText(context),
          InfoTextWidget(label: context.translation.model, value: device.modelDefinition?.modelName).toShimmer(isShow: showLoading, context: 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),
        ],
      ),
    );
  }
}
