import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';

import '../entity/pad.dart';

class StationCreationForm extends StatefulWidget {
  static const routeName = 'station-creation-form';

  const StationCreationForm({Key? key}) : super(key: key);

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

class _StationCreationFormState extends State<StationCreationForm> {
  String dropdownValue = 'Select Pad';

  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
        appBar: PlatformAppBar(
            material: (_, __) => MaterialAppBarData(centerTitle: true),
            cupertino: (_, __) =>
                CupertinoNavigationBarData(automaticallyImplyMiddle: true),
            title: const Text('Station Creation Form',
                style: TextStyle(color: Colors.black))),
        body: Stack(children: <Widget>[
          SingleChildScrollView(
            physics: const AlwaysScrollableScrollPhysics(),
            padding: EdgeInsets.zero,
            child: Column(children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 10.0, vertical: 15.0),
                      child: PlatformTextField(
                          material: (_, __) => MaterialTextFieldData(
                              controller: null,
                              maxLines: 1,
                              decoration: const InputDecoration(
                                  labelText: 'Station Name',
                                  labelStyle: TextStyle(color: Colors.black))),
                          cupertino: (_, __) => CupertinoTextFieldData(
                              controller: null,
                              maxLines: 1,
                              placeholder: 'Station Name'))),
                  Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 10.0, vertical: 15.0),
                      child: DropdownButton<String>(
                        value: dropdownValue,
                        icon: const Icon(Icons.arrow_downward),
                        iconSize: 24,
                        elevation: 16,
                        style: const TextStyle(color: Colors.green),
                        underline: Container(
                          height: 2,
                          color: Colors.green,
                        ),
                        onChanged: (String? newValue) {
                          setState(() {
                            dropdownValue = newValue!;
                          });
                        },
                        items: <String>[
                          'Select Pad',
                          'PadOne',
                          'PadTwo',
                          'PadFree',
                          'PadFour'
                        ].map<DropdownMenuItem<String>>((String value) {
                          return DropdownMenuItem<String>(
                            value: value,
                            child: Text(value),
                          );
                        }).toList(),
                      )),
                  Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 10.0, vertical: 15.0),
                      child: PlatformTextField(
                          material: (_, __) => MaterialTextFieldData(
                              controller: null,
                              maxLines: 1,
                              decoration: const InputDecoration(
                                  labelText: 'Description of Station',
                                  labelStyle: TextStyle(color: Colors.black))),
                          cupertino: (_, __) => CupertinoTextFieldData(
                              controller: null,
                              maxLines: 1,
                              placeholder: 'Station Name')))
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Spacer(),
                  Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 0, vertical: 10),
                      child: PlatformButton(
                          onPressed: () => {}, child: const Text('Move'))),
                  const Spacer(),
                  Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 0, vertical: 10),
                      child: PlatformButton(
                          onPressed: () => {}, child: const Text('Undo'))),
                  const Spacer(),
                  Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 0, vertical: 5),
                      child: PlatformButton(
                          onPressed: () => {}, child: const Text('Save'))),
                  const Spacer(),
                  Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 0, vertical: 5),
                      child: PlatformButton(
                          onPressed: () => {}, child: const Text('Cancel'))),
                  const Spacer(),
                ],
              ),
              DragTarget<Pad>(
                  builder: (context, candidateContainerss, rejectedContainers) {
                return Container(
                  color: Colors.blueGrey,
                  alignment: Alignment.bottomCenter,
                  width: 600,
                  height: 200,
                  margin: const EdgeInsets.all(15),
                  child: const Text(
                    'Station Creation Layout',
                    textAlign: TextAlign.start,
                  ),
                );
              })
            ]),
          ),
        ]));
  }
}
