import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/api/login_api_client.dart';

import '../../../controllers/providers/api/devices_provider.dart';
import '../../../controllers/providers/settings/setting_provider.dart';
import '../../../models/device/device.dart';
import '../../../models/user.dart';
import '../../app_style/colors.dart';
import '../../app_style/sizing.dart';

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

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

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

class AutoCompleteDeviceFieldState extends State<AutoCompleteDeviceField> {
  SettingProvider? _settingProvider;
  DevicesProvider? _devicesProvider;
  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);
    _devicesProvider = Provider.of<DevicesProvider>(context);
    return 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: const [AppStyle.boxShadow]),
      child: TypeAheadField<Device>(
        textFieldConfiguration: TextFieldConfiguration(
          style: Theme.of(context).textTheme.titleLarge,
          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: UserApiClient().user ?? User(),
            hospitalId: widget.hospitalId ?? "",
            serialNumber: value,
          );
        },
        itemBuilder: (context, device) {
          return ListTile(
            title: Text(device.serialNumber ?? ""),
            subtitle: Text("${device.model ?? ""}/${device.brand ?? ""}"),
          );
        },
        onSuggestionSelected: (device) {
          _controller?.text = device.serialNumber ?? "";
          widget.onPick!(device.id ?? "");
        },
      ),
    );
  }
}