import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/controllers/localization/localization.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/device.dart';
import '../app_text_form_field.dart';
import '../qr/scan_qr.dart';

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

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

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

  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(
      user: _userProvider.user,
      host: _settingProvider.host,
      hospitalId: _userProvider.user.clientId,
      serialNumber: "",
      number: result,
      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: 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(() {
              // todo 'sikander' add search screen
            }).expanded,
            16.width,
            const Icon(
              Icons.grid_view_outlined,
              color: Color(0xFF757575),
            ).onPress(() => setState(() {
                  showListView = !showListView;
                })),
            16.width,
            Text(
              'Filter',
              style: AppTextStyles.bodyText2.copyWith(color: const Color(0xFF4A8DB7)),
            ),
          ],
        ).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(user: _userProvider.user, host: _settingProvider.host, hospitalId: _userProvider.user.clientId);
          },
          child: Column(
            children: [
              const SizedBox(height: 16),
              // todo "Siaknder" will remove when add search screen
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                child: Column(
                  children: [
                    ATextFormField(
                      hintText: "Search by Asset Number",
                      controller: numberController,
                      style: Theme.of(context).textTheme.subtitle1,
                      suffixIcon: const Icon(Icons.search_rounded),
                      textInputAction: TextInputAction.search,
                      onAction: () async {
                        _devicesProvider.reset();
                        await _devicesProvider.getAssets(
                            user: _userProvider.user, host: _settingProvider.host, hospitalId: _userProvider.user.clientId, serialNumber: snController.text, number: numberController.text);
                        _searchableList.clear();
                        _searchableList.addAll(_devicesProvider.devices);
                      },
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    ATextFormField(
                      hintText: context.translation.searchBySn,
                      controller: snController,
                      style: Theme.of(context).textTheme.subtitle1,
                      suffixIcon: const Icon(Icons.search_rounded),
                      textInputAction: TextInputAction.search,
                      onAction: () async {
                        _devicesProvider.reset();
                        await _devicesProvider.getAssets(
                            user: _userProvider.user, host: _settingProvider.host, hospitalId: _userProvider.user.clientId, serialNumber: snController.text, number: numberController.text);
                        _searchableList.clear();
                        _searchableList.addAll(_devicesProvider.devices);
                      },
                    ),
                  ],
                ),
              ),
              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: 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: const Icon(Icons.qr_code_scanner),
        onPressed: () async {
          String result = await Navigator.of(context).push(
            MaterialPageRoute(builder: (_) => const ScanQr()),
          ) as String;
          _getDevice(result, isQr: true);
        },
      ),
    );
  }
}