import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/controllers/providers/api/devices_provider.dart';
import 'package:test_sa/controllers/providers/api/user_provider.dart';
import 'package:test_sa/controllers/providers/settings/setting_provider.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/equipment/asset_detail_page.dart';
import 'package:test_sa/views/widgets/equipment/asset_item_gridview.dart';
import 'package:test_sa/views/widgets/equipment/asset_item_listview.dart';
import 'package:test_sa/views/widgets/loaders/lazy_loading.dart';
import 'package:test_sa/views/widgets/loaders/loading_manager.dart';
import 'package:test_sa/views/widgets/loaders/no_item_found.dart';

import '../../../models/device/asset.dart';
import '../../../models/device/asset_search.dart';
import '../../pages/device_transfer/asset_filter_screen.dart';
import '../../pages/device_transfer/asset_search_screen.dart';
import '../qr/scan_qr.dart';

class SingleDevicePicker extends StatefulWidget {
  static final String id = "/single-device-Picker";

  const SingleDevicePicker({Key key}) : super(key: key);

  @override
  _SingleDevicePickerState createState() => _SingleDevicePickerState();
}

class _SingleDevicePickerState extends State<SingleDevicePicker> {
  AssetProvider _devicesProvider;
  UserProvider _userProvider;
  SettingProvider _settingProvider;
  List<Asset> _searchableList = [];
  List<Asset> _initList = [];
  bool _firstTime = true;
  AssetSearch _searchAsset;

  bool showListView = true;

  TextEditingController numberController = TextEditingController();
  TextEditingController snController = TextEditingController();

  _getDevice(String result, {bool isQr = false}) async {
    if (result == null) return;
    _devicesProvider.reset();
    await _devicesProvider.getAssets(
      search: AssetSearch(assetNo: result, assetSerialNumber: ""),
      isQr: isQr,
    );
    _searchableList.clear();
    _searchableList.addAll(_devicesProvider.devices);
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    numberController.dispose();
    snController.dispose();
    _devicesProvider.reset();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _devicesProvider = Provider.of<AssetProvider>(context);
    _userProvider = Provider.of<UserProvider>(context);
    _settingProvider = Provider.of<SettingProvider>(context);

    if (_firstTime && _devicesProvider.devices != null) {
      _searchableList.clear();
      _searchableList.addAll(_devicesProvider.devices);
      _initList.addAll(_devicesProvider.devices);
    }

    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        titleSpacing: 0,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 40,
              padding: const EdgeInsets.only(left: 16, right: 8),
              alignment: Alignment.center,
              decoration: ShapeDecoration(
                color: context.isDark ? Color(0xFF3B3D4A) : Color(0xFFEAF1F4),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
              child: Row(
                children: [
                  const Icon(Icons.search, color: Color(0xFF757575), size: 16),
                  8.width,
                  Text(
                    context.translation.search,
                    style: AppTextStyles.bodyText.copyWith(
                      color: const Color(0xFF757575),
                    ),
                  ).expanded,
                ],
              ),
            ).onPress(() async {
              final result = await Navigator.push(context, MaterialPageRoute(builder: (context) => AssetSearchScreen(data: _searchAsset)));
              if (result != null) {
                _searchAsset = result;
              }
              _searchableList.clear();
              _searchableList.addAll(_devicesProvider.devices);
            }).expanded,
            16.width,
            const Icon(
              Icons.grid_view_outlined,
              color: Color(0xFF757575),
            ).onPress(() => setState(() {
                  showListView = !showListView;
                })),
            16.width,
            Text(
              context.translation.filter,
              style: AppTextStyles.bodyText2.copyWith(color: const Color(0xFF4A8DB7)),
            ).onPress(() async {
              final result = await Navigator.push(context, MaterialPageRoute(builder: (context) => AssetFilterScreen(data: _searchAsset)));
              if (result != null) {
                _searchAsset = result;
              }
              _searchableList.clear();
              _searchableList.addAll(_devicesProvider.devices);
            }),
          ],
        ).paddingOnly(start: 16, end: 16),
      ),
      body: SafeArea(
        child: LoadingManager(
          isLoading: _devicesProvider.isLoading,
          stateCode: _devicesProvider.stateCode,
          isFailedLoading: _devicesProvider.devices == null,
          onRefresh: () async {
            _devicesProvider.reset();
            await _devicesProvider.getAssets(search: _searchAsset);
          },
          child: Column(
            children: [
              Expanded(
                  child: _searchableList.isEmpty
                      ? NoItemFound(
                          message: context.translation.noDeviceFound,
                        )
                      : LazyLoading(
                          nextPage: _devicesProvider.nextPage,
                          onLazyLoad: () async {
                            await _devicesProvider.getDevicesList(
                                user: _userProvider.user, host: _settingProvider.host, hospitalId: _userProvider.user.clientId, serialNumber: snController.text, number: numberController.text);
                          },
                          child: AnimatedSwitcher(
                            duration: const Duration(milliseconds: 500),
                            child: showListView
                                ? ListView.separated(
                                    padding: const EdgeInsets.all(16),
                                    itemCount: _searchableList.length,
                                    separatorBuilder: (listContext, itemIndex) => 8.height,
                                    itemBuilder: (listContext, itemIndex) {
                                      return AssetItemListView(
                                        device: _searchableList[itemIndex],
                                        onPressed: (device) {
                                          Navigator.of(context).pop(device);
                                        },
                                      );
                                    },
                                  )
                                : GridView.builder(
                                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 191 / 261, crossAxisSpacing: 16, mainAxisSpacing: 16),
                                    itemCount: _searchableList.length,
                                    padding: const EdgeInsets.all(16),
                                    itemBuilder: (context, index) {
                                      return AssetItemGridView(
                                        device: _searchableList[index],
                                        onPressed: (device) {
                                          Navigator.of(context).pushNamed(AssetDetailPage.id, arguments: device.id);
                                          return;
                                          Navigator.of(context).pop(device);
                                        },
                                      );
                                    },
                                  ),
                          ),
                        )),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        heroTag: "some tag 2",
        child: "qr".toSvgAsset(height: 32, fit: BoxFit.fitHeight, color: Theme.of(context).scaffoldBackgroundColor),
        onPressed: () async {
          String result = await Navigator.of(context).push(
            MaterialPageRoute(builder: (_) => const ScanQr()),
          ) as String;
          _getDevice(result, isQr: true);
        },
      ),
    );
  }
}