import React from "react";
import axios from "axios";
import { BeatLoader } from "react-spinners";

import "./App.scss";

const App = () => {
  const [loading, setLoading] = React.useState(false);

  const phoneRef = React.useRef();
  const ageRef = React.useRef();
  const pincodeRef = React.useRef();

  function isValid(length, entity) {
    switch (length) {
      case 10:
        var regx = /^[6-9]\d{9}$/;
        if (regx.test(entity)) {
          return true;
        }
        break;

      case 2:
        var regx = /^\d{2}$/;
        if (regx.test(entity)) {
          return true;
        }
        break;

      case 6:
        var regx = /^[8]\d{5}$/;
        if (regx.test(entity)) {
          return true;
        }
        break;
    }
    return false;
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    console.log(
      "Submitting with ",
      phoneRef.current.value,
      ageRef.current.value,
      pincodeRef.current.value
    );

    if (!isValid(10, phoneRef.current.value)) {
      alert("Phone number is Invalid");
      setLoading(false);
      return;
    }
    if (!isValid(2, ageRef.current.value)) {
      setLoading(false);
      alert("Please enter valid age");
      return;
    }
    if (!isValid(6, pincodeRef.current.value)) {
      setLoading(false);
      alert("Please enter valid pincode. Currently we only support Bihar");
      return;
    }
    const config = {
      method: "post",
      url: `https://cowinnotifierwa.herokuapp.com/user`,
      data: {
        phone: phoneRef.current.value,
        age: ageRef.current.value,
        pincode: pincodeRef.current.value,
      },
    };

    axios(config)
      .then(function (res) {
        if (res.status == 200) {
          phoneRef.current.value = "";
          ageRef.current.value = "";
          pincodeRef.current.value = "";
          if (res.data.status === "success") {
            alert(
              "Your Request has been submitted. We will notify you instantly for the slots"
            );
            setLoading(false);
            return;
          } else if (res.data.message.indexOf("E11000") > -1) {
            alert("We already have your record. Stay safe! we will notify you");
            setLoading(false);
            return;
          }
        }

        alert(
          `Your request didn't go through. We may be little overloaded. Please try again`
        );
        setLoading(false);
        return;
      })
      .catch((e) => {
        setLoading(false);
        alert(`Your request failed! we may be overloaded. Please try again`);
      });
  };

  return (
    <>
      <form>
        <h1>Get instant Alerts for Vaccination slots</h1>
        <input
          disabled={loading}
          placeholder="Whatsapp Number"
          type="tel"
          maxLength="10"
          ref={phoneRef}
        ></input>
        <input
          disabled={loading}
          placeholder="Age"
          type="tel"
          maxLength="2"
          minLength="2"
          ref={ageRef}
        ></input>
        <input
          disabled={loading}
          placeholder="Pincode"
          type="tel"
          maxLength="6"
          ref={pincodeRef}
        ></input>
        <button disabled={loading} onClick={handleSubmit}>
          {loading ? (
            <BeatLoader size={6} marin={1} color={"#017DB7"} />
          ) : (
            "Submit"
          )}
        </button>
      </form>

      <a href="https://twitter.com/manigedit" target="_blank">
        <i className="fa fa-twitter"></i>Follow Me
      </a>

      <link
        rel="stylesheet"
        href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
      ></link>
      <link
        href="https://fonts.googleapis.com/css?family=Roboto:400"
        rel="stylesheet"
        type="text/css"
      ></link>
    </>
  );
};

export default App;