import 'package:flutter/material.dart';
import 'package:flutter_canvas_editor/providers/editor.dart';
import 'package:provider/provider.dart';

class CanvasSetupPage extends StatefulWidget {
  @override
  _CanvasSetupPageState createState() => _CanvasSetupPageState();
}

class _CanvasSetupPageState extends State<CanvasSetupPage> {
  final _formKey = GlobalKey<FormState>();
  final TextEditingController _widthController = TextEditingController();
  final TextEditingController _heightController = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    final editorProvider = Provider.of<Editor>(context, listen: false);

    _widthController.text = (editorProvider.canvasProperty.width / 10).toString();
    _heightController.text = (editorProvider.canvasProperty.height / 10).toString();

  }

  @override
  Widget build(BuildContext context) {
    final editorProvider = Provider.of<Editor>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Canvas Setup'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              Container(
                padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
                decoration: BoxDecoration(
                  color: Colors.amber,
                  borderRadius: BorderRadius.circular(2)
                ),
                width: double.infinity,
                child: Text('Warning Test'),
              ),

              SizedBox(height: 16),

              TextFormField(
                controller: _widthController,
                decoration: InputDecoration(labelText: 'Width'),
                keyboardType: TextInputType.number,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter width';
                  }
                  return null;
                },
              ),
              TextFormField(
                controller: _heightController,
                decoration: InputDecoration(labelText: 'Height'),
                keyboardType: TextInputType.number,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter height';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  if (_formKey.currentState!.validate()) {
                    // confirmation
                    final confirmationResult = await showDialog(
                      barrierDismissible: false,
                      context: context, 
                      builder: (context) => AlertDialog(
                        title: Text('Update Label Size'),
                        content: Text('updating to smaller label size may cause element lost, Are you sure want to update label size ?'),
                        actions: [
                          TextButton(
                            onPressed: () => Navigator.pop(context, true), 
                            child: Text('Update label size')
                          ),
                          TextButton(
                            onPressed: () => Navigator.pop(context, false), 
                            child: Text('Cancel')
                          )
                        ],
                      ),
                    );

                    if (!confirmationResult) return;
                    
                    // Process data
                    editorProvider.updateCanvasProperty(
                      context,
                      double.parse(_widthController.text) * 10 , 
                      double.parse(_heightController.text) * 10
                    ); 
                    Navigator.pop(context);
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}