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