import 'package:flutter/material.dart';

import '../views/navigation/navigation_screen.dart';

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

  @override
  State<WelcomePageStateTextFieldState> createState() =>
      _WelcomePageStateTextFieldState();
}

class _WelcomePageStateTextFieldState
    extends State<WelcomePageStateTextFieldState> {
  final firstnameTextEditingController = TextEditingController();
  final secondnameTextEditingController = TextEditingController();
  final weightTextEditingController = TextEditingController();
  final heightTextEditingController = TextEditingController();
  final caloriesTextEditingController = TextEditingController();

  bool isNameVisible = false;
  bool isSNameVisible = false;
  bool isWeightVisible = false;
  bool isHeightVisible = false;
  bool isCaloriesVisible = false;

  void setNameVisible(bool visibility) {
    setState(() => isNameVisible = visibility);
  }

  void setSNameVisible(bool visibility) {
    setState(() => isSNameVisible = visibility);
  }

  void setWeightVisible(bool visibility) {
    setState(() => isWeightVisible = visibility);
  }

  void setHeightVisible(bool visibility) {
    setState(() => isHeightVisible = visibility);
  }

  void setCaloriesVisible(bool visibility) {
    setState(() => isCaloriesVisible = visibility);
  }

  @override
  Widget build(BuildContext context) {
      return  Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const SizedBox(
            height: 24,
          ),
          TextFormField(
            onChanged: (newText) {
              if (newText.isNotEmpty) {
                setNameVisible(true);
              } else {
                setNameVisible(false);
              }
            },
            controller: firstnameTextEditingController,
            decoration: InputDecoration(
              hintText: 'Name',
              border: const OutlineInputBorder(gapPadding: 8),
              suffixIcon: isNameVisible
                  ? IconButton(
                  onPressed: () {
                    firstnameTextEditingController.clear();
                    setState(() => isNameVisible = false);
                  },
                  icon: const Icon(Icons.clear))
                  : null,
            ),
            keyboardType: TextInputType.text,
          ),
          const SizedBox(
            height: 24,
          ),
          TextFormField(
              onChanged: (newText) {
                if (newText.isNotEmpty) {
                  setSNameVisible(true);
                } else {
                  setSNameVisible(false);
                }
              },
              controller: secondnameTextEditingController,
              decoration: InputDecoration(
                hintText: 'Vorname',
                border: const OutlineInputBorder(gapPadding: 8),
                suffixIcon: isSNameVisible
                    ? IconButton(
                    onPressed: () {
                      secondnameTextEditingController.clear();
                      setState(() => isSNameVisible = false);
                    },
                    icon: const Icon(Icons.clear))
                    : null,
              ),
              keyboardType: TextInputType.text),
          const SizedBox(
            height: 24,
          ),
          TextFormField(
              onChanged: (newText) {
                if (newText.isNotEmpty) {
                  setWeightVisible(true);
                } else {
                  setWeightVisible(false);
                }
              },
              controller: weightTextEditingController,
              decoration: InputDecoration(
                hintText: 'Gewicht',
                border: const OutlineInputBorder(gapPadding: 8),
                suffixIcon: isWeightVisible
                    ? IconButton(
                    onPressed: () {
                      weightTextEditingController.clear();
                      setState(() => isWeightVisible = false);
                    },
                    icon: const Icon(Icons.clear))
                    : null,
              ),
              keyboardType: TextInputType.number),
          const SizedBox(
            height: 24,
          ),
          TextFormField(
              onChanged: (newText) {
                if (newText.isNotEmpty) {
                  setHeightVisible(true);
                } else {
                  setHeightVisible(false);
                }
              },
              controller: heightTextEditingController,
              decoration: InputDecoration(
                hintText: 'Größe',
                border: const OutlineInputBorder(gapPadding: 8),
                suffixIcon: isHeightVisible
                    ? IconButton(
                    onPressed: () {
                      heightTextEditingController.clear();
                      setState(() => isHeightVisible = false);
                    },
                    icon: const Icon(Icons.clear))
                    : null,
              ),
              keyboardType: TextInputType.number),
          const SizedBox(
            height: 24,
          ),
          TextFormField(
              onChanged: (newText) {
                if (newText.isNotEmpty) {
                  setCaloriesVisible(true);
                } else {
                  setCaloriesVisible(false);
                }
              },
              controller: caloriesTextEditingController,
              decoration: InputDecoration(
                hintText: 'gewünschte Kalorienzufuhr',
                border: const OutlineInputBorder(gapPadding: 8),
                suffixIcon: isCaloriesVisible
                    ? IconButton(
                    onPressed: () {
                      caloriesTextEditingController.clear();
                      setState(() => isCaloriesVisible = false);
                    },
                    icon: const Icon(Icons.clear))
                    : null,
              ),
              keyboardType: TextInputType.number),
          const SizedBox(
            height: 24,
          ),
          ElevatedButton(onPressed: (){
            Navigator.pushAndRemoveUntil(context,
                MaterialPageRoute(builder: (context) => const NavigationScreen()), (r) => false);
          }, child: const Text('Bestätigen'))
        ],
      );
  }
}