import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.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/models/device/device.dart';
import 'package:test_sa/views/app_style/colors.dart';
import 'package:test_sa/views/app_style/sizing.dart';
import 'package:test_sa/views/widgets/loaders/loading_manager.dart';

class AutoCompleteDeviceField extends StatefulWidget {
  final Device initialValue;
  final int hospitalId;
  final Function(int) onPick;

  const AutoCompleteDeviceField({Key key, this.initialValue, this.onPick, this.hospitalId}) : super(key: key);

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

class _AutoCompleteDeviceFieldState extends State<AutoCompleteDeviceField> {
  SettingProvider _settingProvider;
  DevicesProvider _devicesProvider;
  UserProvider _userProvider;
  TextEditingController _controller;

  @override
  void initState() {
    _controller = TextEditingController(text: widget.initialValue.serialNumber);
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _settingProvider = Provider.of<SettingProvider>(context);
    _userProvider = Provider.of<UserProvider>(context);
    _devicesProvider = Provider.of<DevicesProvider>(context);
    //
    return LoadingManager(
      isLoading: _devicesProvider.isLoading,
      isFailedLoading: _devicesProvider.devices == null,
      stateCode: _devicesProvider.stateCode,
      onRefresh: () async {
        _devicesProvider.reset();
        await _devicesProvider.getEquipment(host: _settingProvider.host, user: _userProvider.user, hospitalId: widget.hospitalId);
      },
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: AColors.black),
            borderRadius: BorderRadius.circular(AppStyle.borderRadius * AppStyle.getScaleFactor(context)),
            boxShadow: [AppStyle.boxShadow]),
        child: TypeAheadField<Device>(
          textFieldConfiguration: TextFieldConfiguration(
            style: Theme.of(context).textTheme.headline6,
            controller: _controller,
            textAlign: TextAlign.center,
            decoration: const InputDecoration(
              border: InputBorder.none,
              disabledBorder: InputBorder.none,
              focusedBorder: InputBorder.none,
              enabledBorder: InputBorder.none,
            ),
            textInputAction: TextInputAction.search,
          ),
          suggestionsCallback: (value) async {
            return await _devicesProvider.getDevicesList(
              host: _settingProvider.host,
              user: _userProvider.user,
              hospitalId: widget.hospitalId ?? _userProvider.user.clientId,
              serialNumber: value,
            );
          },
          itemBuilder: (context, device) {
            return ListTile(
              title: Text(device.serialNumber),
              subtitle: Text("${device.modelDefinition.modelName}/${device.modelDefinition.manufacturerName}"),
            );
          },
          onSuggestionSelected: (device) {
            _controller.text = device.serialNumber;
            widget.onPick(device.id);
          },
        ),
      ),
    );
  }
}