import 'package:ernaehrung/android/pages/nav_pages/main_page.dart';
import 'package:flutter/material.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 MainPage()),
                  (r) => false);
            },
            child: const Text('Bestätigen'))
      ],
    );
  }
}