import { Button, Form, SelectNative, TextInput } from "@avaya/neo-react";
import { useEffect, useState } from "react";

import avayaduxlogo from "./logo-avaya-dux.svg";

import "./App.css";

function App() {
  const helperTextExample = "example of helper text";
  const [helperText, setHelperText] = useState(helperTextExample);
  const [errorList, setErrorList] = useState<string[]>([]);
  const [chosenCar, setChosenCar] = useState("");
  const [phone, setPhone] = useState("8881112222");

  useEffect(() => {
    if (chosenCar !== "") {
      setHelperText(helperTextExample);
      setErrorList([]);
    }
  }, [chosenCar]);

  return (
    <div className="App">
      <header className="App-header">
        <img src={avayaduxlogo} className="avaya-dux-logo" alt="avaya logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload
        </p>
      </header>

      <section>
        <Form
          inline
          onSubmit={(e) => {
            e.preventDefault();
            alert(`you successfully submitted: ${chosenCar}`);
          }}
          style={{ justifyContent: "space-evenly" }}
        >
          <div>
            <TextInput
              clearable
              defaultValue="Initial Value"
              helperText="Click the clear icon inside the input."
              label="Clearable Field"
              onChange={(e) => setPhone(e.currentTarget.value)}
              startAddon="+1"
            />

            <TextInput label="Read Only Input" readOnly value={phone} />
          </div>

          <div>
            <SelectNative
              defaultValue=""
              errorList={errorList}
              helperText={helperText}
              label="Choose a car:"
              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                setChosenCar(e.target.value)
              }
              required
            >
              <option value="" disabled hidden>
                select an option
              </option>
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </SelectNative>

            <Button
              style={{ marginRight: 10 }}
              type="submit"
              onClick={() => {
                if (chosenCar === "") {
                  setHelperText("");
                  setErrorList(["you must select an option"]);
                }
              }}
            >
              Submit
            </Button>

            <Button type="reset" onClick={() => setChosenCar("")}>
              Reset
            </Button>
          </div>
        </Form>
      </section>
    </div>
  );
}

export default App;