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

import '../styles.dart';

class CustomTextField extends StatefulWidget {
  final TextEditingController controller;

  final String placeholder;

  final bool obscureText;

  CustomTextField({
    @required this.controller,
    this.obscureText = false,
    this.placeholder = '',
  })  : assert(controller != null),
        assert(placeholder != null);

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

class _CustomTextFieldState extends State<CustomTextField> {

  FocusNode focusNode;
  String _text = "";

  @override
  void initState() {
    super.initState();
    focusNode = FocusNode();
    focusNode.addListener(() => setState(() {}));
  }

  @override
  void dispose() {
    super.dispose();
    focusNode.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: Styles.textFieldBackground,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 4,
          vertical: 8,
        ),
        child: Row(
          children: [
            Expanded(
              child: CupertinoTextField(
                decoration: null,
                focusNode: focusNode,
                controller: widget.controller,
                placeholder: widget.placeholder,
                style: Styles.searchText,
                cursorColor: CupertinoTheme.of(context).primaryColor,
                autocorrect: false,
                obscureText: widget.obscureText,
                onChanged: _textFieldChange,
              ),
            ),
            GestureDetector(onTap: () {
              widget.controller.clear();
            }, child: Builder(
              builder: (BuildContext context) {
                if (focusNode != null && focusNode.hasFocus && _text != "") {
                  return Icon(
                    CupertinoIcons.clear_thick_circled,
                    semanticLabel: 'Clear search terms',
                    color: Styles.searchIconColor,
                  );
                }
                return Container(
                  width: 0.0,
                  height: 0.0,
                );
              },
            )),
          ],
        ),
      ),
    );
  }

  _textFieldChange(String text){
    setState(() {
      _text = text;
    });
  }
}