import axios from "axios";
import React, { useEffect, useState } from "react";

import ClipLoader from "react-spinners/ClipLoader";
import { Link } from "react-router-dom";
import swal from "sweetalert";
import { isAutheticated } from "src/auth";

function Address() {
  const token = isAutheticated();
  const [loading, setLoading] = useState(false);
  const [company, setCompany] = useState("");
  const [address, setAddress] = useState("");
  const [city, setCity] = useState("");
  const [state, setState] = useState("");
  const [country, setCountry] = useState("");
  const [pincode, setPincode] = useState("");
  const [website, setWebsite] = useState("");
  const [contact, setContact] = useState("");
  const [email, setEmail] = useState("");
  const [gstin, setGSTIN] = useState("");

  useEffect(() => {
    async function getConfiguration() {
      const configDetails = await axios.get(`/api/config`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      configDetails.data.result.map((item) => {
        item.address.map((el) => {
          setCompany(el.company);
          setAddress(el.address);
          setCity(el.city);
          setState(el.state);
          setCountry(el.country);
          setPincode(el.pincode);
          setWebsite(el.website);
          setContact(el.contact);
          setEmail(el.email);
          setGSTIN(el?.gstin);
        });
      });
    }
    getConfiguration();
  }, []);
  async function handelChange(e) {
    if (e.target.name.toLowerCase() === "address") {
      setAddress(e.target.value);
    } else if (e.target.name.toLowerCase() === "company name") {
      setCompany(e.target.value);
    } else if (e.target.name.toLowerCase() === "city") {
      setCity(e.target.value);
    } else if (e.target.name.toLowerCase() === "state") {
      setState(e.target.value);
    } else if (e.target.name.toLowerCase() === "country") {
      setCountry(e.target.value);
    } else if (e.target.name.toLowerCase() === "pincode") {
      setPincode(e.target.value);
    } else if (e.target.name.toLowerCase() === "website") {
      setWebsite(e.target.value);
    } else if (e.target.name.toLowerCase() === "contact number") {
      setContact(e.target.value);
    } else if (e.target.name.toLowerCase() === "email") {
      setEmail(e.target.value);
    } else if (e.target.name.toLowerCase() === "gstin") {
      setGSTIN(e.target.value);
    }
  }
  async function handelSubmit() {
    if (!/^[0-9A-Za-z]{15}$/.test(gstin))
      return swal("Warning!", "Enter valid GSTIN");
    setLoading(true);
    let data = {
      company,
      address,
      city,
      state,
      country,
      pincode,
      website,
      contact,
      email,
      gstin,
    };
    let res = await axios.post(`/api/config/address`, data, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });

    if (res) {
      setLoading(false);
      console.log(res);
      swal("Success!", res.data.message, res.data.status);
    }
  }

  return (
    <div>
      <div className="main-content">
        <div className="page-content">
          <div className="container-fluid">
            <div className="row">
              <div className="col-lg-12">
                <div className="card">
                  <div className="card-body">
                    <div className="row">
                      <div className="col-md-12 col-lg-6 col-xl-6">
                        <h1 className="text-left head-small">Address</h1>

                        <form>
                          <div className="row">
                            <div className="col-lg-12">
                              <div className="form-group">
                                <>
                                  <label
                                    htmlFor="basicpill-phoneno-input"
                                    className="label-100 mt-3"
                                  >
                                    Company Name
                                  </label>
                                  <input
                                    type="text"
                                    name="company name"
                                    value={company}
                                    onChange={(e) => handelChange(e)}
                                    className="form-control input-field "
                                    id="basicpill-phoneno-input"
                                  />
                                  <label
                                    htmlFor="basicpill-phoneno-input"
                                    className="label-100 mt-3"
                                  >
                                    Address
                                  </label>
                                  <input
                                    value={address}
                                    type="text"
                                    name="address"
                                    onChange={(e) => handelChange(e)}
                                    className="form-control input-field "
                                    id="basicpill-phoneno-input"
                                  />{" "}
                                  <label
                                    htmlFor="basicpill-phoneno-input"
                                    className="label-100 mt-3"
                                  >
                                    City
                                  </label>
                                  <input
                                    value={city}
                                    type="text"
                                    name="city"
                                    onChange={(e) => handelChange(e)}
                                    className="form-control input-field "
                                    id="basicpill-phoneno-input"
                                  />
                                  <label
                                    htmlFor="basicpill-phoneno-input"
                                    className="label-100 mt-3"
                                  >
                                    State
                                  </label>
                                  <input
                                    value={state}
                                    type="text"
                                    name="state"
                                    onChange={(e) => handelChange(e)}
                                    className="form-control input-field "
                                    id="basicpill-phoneno-input"
                                  />
                                  <label
                                    htmlFor="basicpill-phoneno-input"
                                    className="label-100 mt-3"
                                  >
                                    Country
                                  </label>
                                  <input
                                    value={country}
                                    type="text"
                                    name="country"
                                    onChange={(e) => handelChange(e)}
                                    className="form-control input-field "
                                    id="basicpill-phoneno-input"
                                  />
                                  <label
                                    htmlFor="basicpill-phoneno-input"
                                    className="label-100 mt-3"
                                  >
                                    Pin Code
                                  </label>
                                  <input
                                    value={pincode}
                                    type="text"
                                    name="pincode"
                                    onChange={(e) => handelChange(e)}
                                    className="form-control input-field "
                                    id="basicpill-phoneno-input"
                                  />
                                  <label
                                    htmlFor="basicpill-phoneno-input"
                                    className="label-100 mt-3"
                                  >
                                    GSTIN
                                  </label>
                                  <input
                                    value={gstin}
                                    type="text"
                                    name="gstin"
                                    onChange={(e) => handelChange(e)}
                                    className="form-control input-field "
                                    id="basicpill-phoneno-input"
                                  />
                                  <label
                                    htmlFor="basicpill-phoneno-input"
                                    className="label-100 mt-3"
                                  >
                                    Website
                                  </label>
                                  <input
                                    value={website}
                                    type="text"
                                    name="website"
                                    onChange={(e) => handelChange(e)}
                                    className="form-control input-field "
                                    id="basicpill-phoneno-input"
                                  />
                                  <label
                                    htmlFor="basicpill-phoneno-input"
                                    className="label-100 mt-3"
                                  >
                                    Contact Number
                                  </label>
                                  <input
                                    value={contact}
                                    type="text"
                                    name="contact number"
                                    onChange={(e) => handelChange(e)}
                                    className="form-control input-field "
                                    id="basicpill-phoneno-input"
                                  />{" "}
                                  <label
                                    htmlFor="basicpill-phoneno-input"
                                    className="label-100 mt-3"
                                  >
                                    Email
                                  </label>
                                  <input
                                    value={email}
                                    type="text"
                                    name="email"
                                    onChange={(e) => handelChange(e)}
                                    className="form-control input-field "
                                    id="basicpill-phoneno-input"
                                  />
                                </>
                              </div>
                            </div>
                          </div>
                          <div className="row mt-2">
                            <div className="col-lg-12">
                              <div className="form-group text-left">
                                <button
                                  type="button"
                                  onClick={handelSubmit}
                                  className="btn btn-success btn-login waves-effect waves-light mr-3 pt-2 pb-2 pr-4 pl-4"
                                >
                                  <ClipLoader loading={loading} size={18} />
                                  {!loading && "Save"}
                                </button>
                              </div>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>

                    {/* <!-- end table-responsive --> */}
                  </div>
                </div>
              </div>
            </div>
          </div>
          {/* <!-- container-fluid --> */}
        </div>
        {/* <!-- End Page-content --> */}
      </div>
    </div>
  );
}

export default Address;