import 'package:flutter/material.dart';

class AskQuestionPage extends StatefulWidget {
  const AskQuestionPage({super.key});

  @override
  State<AskQuestionPage> createState() => _AskQuestionPageState();
}

class _AskQuestionPageState extends State<AskQuestionPage> {
  final _formKey = GlobalKey<FormState>();

  String dropdownvalue = 'One';

  @override
  Widget build(BuildContext context) {
    return Form(
        key: _formKey,
        child: Column(
          children: <Widget>[
            const SizedBox(
              height: 10,
            ),
            const Text(
              'Ask Question',
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  fontFamily: 'Roboto'),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                const Align(
                    alignment: Alignment.center,
                    child: SizedBox(
                      width: 50,
                      child: Text(
                        'Type',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    )),
                DropdownButton(
                  focusColor: Colors.white,
                  value: dropdownvalue,
                  items: const <DropdownMenuItem<String>>[
                    DropdownMenuItem(
                      value: 'One',
                      child: Text('Preparation'),
                    ),
                    DropdownMenuItem(
                      value: 'Two',
                      child: Text('Planting'),
                    ),
                    DropdownMenuItem(
                      value: 'Three',
                      child: Text('Harvesting'),
                    ),
                  ],
                  //Following line, ? after String implies that
                  //  dropdown value can be NULL (TypeSafety Feature).
                  onChanged: (String? newValue) {
                    setState(() {
                      dropdownvalue = newValue!;
                    });
                  },
                )
              ],
            ),
            Row(
              children: [
                const Align(
                    alignment: Alignment.center,
                    child: SizedBox(
                      width: 200,
                      child: Text(
                        'Title',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    )),
                SizedBox(
                  width: 100,
                  child: TextFormField(
                    textAlign: TextAlign.center,
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Please enter some text';
                      }
                      return null;
                    },
                  ),
                )
              ],
            ),
            const SizedBox(
              height: 20,
            ),
            const Align(
                alignment: Alignment.center,
                child: SizedBox(
                  width: 200,
                  child: Text(
                    'Description',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                )),
            const SizedBox(
              height: 20,
            ),
            SizedBox(
              width: 300,
              height: 100,
              child: TextFormField(
                textAlign: TextAlign.center,
                decoration: const InputDecoration(
                  enabledBorder: OutlineInputBorder(),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
              ),
            ),
            const Align(
                alignment: Alignment.center,
                child: SizedBox(
                  child: Text(
                    'Tags',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                )),
            const SizedBox(
              height: 20,
            ),
            Row(
              children: [
                Container(
                  margin: const EdgeInsets.only(left: 75.0, right: 10.0),
                  padding: const EdgeInsets.all(3.0),
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.blueAccent)),
                  child: const Text('Temperature'),
                ),
                Container(
                  margin: const EdgeInsets.only(left: 5.0, right: 10.0),
                  padding: const EdgeInsets.all(3.0),
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.blueAccent)),
                  child: const Text('Soil'),
                ),
                Container(
                  margin: const EdgeInsets.only(left: 5.0, right: 10.0),
                  padding: const EdgeInsets.all(3.0),
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.blueAccent)),
                  child: const Text('Pesticides'),
                ),
              ],
            ),
            const SizedBox(
              height: 20,
            ),
            OutlinedButton(
              onPressed: () {},
              child: const Text('Add Tag'),
            ),
            const SizedBox(
              height: 10,
            ),
            ElevatedButton(
              onPressed: () {
                //Validate returns true if the form is valid,
                //  or false otherwise
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                    content: Text('Processing Data'),
                  ));
                }
              },
              child: const Text('Submit'),
            ),
          ],
        ));
  }
}
