import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

import '../constants.dart';

class PlugSettingsArguments {
  PlugSettingsArguments(this.device_id, this.device_descriptor);

  final String device_id;
  String? device_descriptor;
}

class PlugSettings extends StatefulWidget {
  PlugSettings({super.key});

  String? device_descriptor;

  @override
  State<PlugSettings> createState() => _PlugSettingsState();
}

class _PlugSettingsState extends State<PlugSettings> {
  @override
  Widget build(BuildContext context) {
    final args =
        ModalRoute.of(context)!.settings.arguments! as PlugSettingsArguments;

    widget.device_descriptor = args.device_descriptor;

    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text('Plug settings'),
        ),
        body: Column(children: [
          const SizedBox(height: 60),
          Table(
            border: TableBorder(
                borderRadius: BorderRadius.circular(Constants.TABLE_RADIUS)),
            defaultVerticalAlignment: TableCellVerticalAlignment.middle,
            columnWidths: const {
              0: FixedColumnWidth(200.0),
              1: FixedColumnWidth(200.0),
            },
            children: [
              TableRow(children: [
                const Text(
                  'ID',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Text(args.device_id)
              ]),
              TableRow(children: [
                const Text(
                  'Name',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                TextField(
                  controller: TextEditingController()
                    ..text = args.device_descriptor ?? '',
                  decoration: InputDecoration(
                    border: OutlineInputBorder(
                        borderRadius:
                            BorderRadius.circular(Constants.TABLE_RADIUS)),
                    hintText: 'device descriptor',
                    isDense: true,
                  ),
                  style: const TextStyle(height: 1.0, color: Colors.black),
                  onChanged: (text) => widget.device_descriptor = text,
                ),
              ])
            ],
          ),
          const SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                  onPressed: () {
                    Navigator.of(context).pushReplacementNamed(
                      '/',
                    );
                  },
                  style: TextButton.styleFrom(
                    foregroundColor: Colors.red[900],
                  ),
                  child: const Text(
                    'Back',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )),
              const SizedBox(width: 100),
              ElevatedButton(
                  onPressed: () {
                    http
                        .post(Uri.parse(
                            "${Constants.BASE_URL}/device_name/${args.device_id}/${widget.device_descriptor}"))
                        .then((response) {
                      if (response.statusCode != 200) {
                        throw Exception("Failed to fetch devices");
                      }

                      Navigator.of(context).pushReplacementNamed(
                        '/',
                      );
                    });
                  },
                  style: TextButton.styleFrom(
                    foregroundColor: Colors.green[900],
                  ),
                  child: const Text(
                    'Accept',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ))
            ],
          )
        ]));
  }
}