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

class ArticleFormPage extends StatefulWidget {
  @override
  _ArticleFormPageState createState() => _ArticleFormPageState();
}

class _ArticleFormPageState extends State<ArticleFormPage> {
  final _formKey = GlobalKey<FormState>();
  String clave = '';
  int categoria = 1;
  String nombre = '';
  List<double> precios = [0.0, 0.0];
  bool activo = true;

  Future<void> _submitForm() async {
    if (_formKey.currentState?.validate() ?? false) {
      _formKey.currentState?.save();

      final payload = {
        "clave": clave,
        "categoria": categoria,
        "nombre": nombre,
        "precios": precios.map((precio) => {"precio": precio}).toList(),
        "activo": activo,
      };

      final articleService = ArticleService();
      final success = await articleService.addArticle(payload);

      if (success) {
        Navigator.pop(context); // Regresa a la lista de artículos
      } else {
        // Maneja el error
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Error al guardar el artículo')),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Formulario de Artículo'),
        centerTitle: true,
        foregroundColor: Colors.white,
        backgroundColor: Colors.teal,
      ),
      body: Padding(
        padding: EdgeInsets.all(60.0),
        child: Form(
          key: _formKey,
          child: ListView(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Clave',
              border: OutlineInputBorder()),
                //
                onSaved: (value) => clave = value ?? '',
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Por favor ingresa la clave';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),

              TextFormField(
                decoration: InputDecoration(labelText: 'Categoría',
                    border: OutlineInputBorder()),
                keyboardType: TextInputType.number,
                //
                onSaved: (value) => categoria = int.parse(value ?? '1'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Por favor ingresa la categoría';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),

              TextFormField(
                decoration: InputDecoration(labelText: 'Nombre', border: OutlineInputBorder()),
                onSaved: (value) => nombre = value ?? '',
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Por favor ingresa el nombre';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),

              TextFormField(
                decoration: InputDecoration(labelText: 'Precio 1', border: OutlineInputBorder()),
                keyboardType: TextInputType.number,
                onSaved: (value) => precios[0] = double.parse(value ?? '0.0'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Por favor ingresa el precio';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),

              TextFormField(
                decoration: InputDecoration(labelText: 'Precio 2', border: OutlineInputBorder()),
                keyboardType: TextInputType.number,
                onSaved: (value) => precios[1] = double.parse(value ?? '0.0'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Por favor ingresa el precio';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),

              SwitchListTile(
                title: Text('Activo'),
                value: activo,
                onChanged: (value) {
                  setState(() {
                    activo = value;
                  });
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submitForm,
                child: Text('Guardar'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}