Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable no-mixed-spaces-and-tabs */
import React, { useState } from 'react'
import LocationModal from './LocationModal'
import DeleteModal from '../../../shared/DeleteModal'

const Location = ({ locations = [], googleApiKey, locationsAddUrl, title }) => {

        const [actionUrl, setActionUrl] = useState(locationsAddUrl)
        const [defaultData, setDefaultData] = useState('')
        const [showModal, setShowModal] = useState(false)
        const [showDeleteModal, setShowDeleteModal] = useState(false)
        const [deleteLink, setDeleteLink] = useState('')
        const [removeElement, setRemoveElement] = useState('')
        const [locationState, setLocationState] = useState(locations)

        const addLocation = (url) => {
                setShowModal(true)
                setActionUrl(url)
        }

        const editLocation = (url, item) => {
                setShowModal(true)
                setActionUrl(url)
                setDefaultData(item)
        }

        const closeModal = () => setShowModal(false)
        const closeDeleteModal = () => setShowDeleteModal(false)

        const deleteLocation = ({ url, address }) => {
                setShowDeleteModal(true)
                setDeleteLink(url)
                setRemoveElement(address)
        }

        return (
                <>
                        <div className="user-profile-extended-ov st2">
                                <h3>
                                        {title}
                                        <button
                                                className="btn btn-location-add"
                                                onClick={() => addLocation(locationsAddUrl)}
                                        >
                                                <i className="fa fa-plus-square" />
                                        </button>
                                </h3>
                                <span id="locations-records">
                                        {
                                                locationState.map((location, index) => (
                                                        <>
                                                                <p key={index}>
                                                                        {location.formatted_address}
                                                                        {location.is_main === 'y' ? ' (Principal)' : ''}
                                                                        <button
                                                                                onClick={() => editLocation(location.link_edit, location)}
                                                                                className="btn btn-location-edit"
                                                                                style={{ padding: '.3rem' }}
                                                                        >
                                                                                <i className="fa fa-pencil" />
                                                                        </button>
                                                                        <button
                                                                                onClick={() => deleteLocation({ url: location.link_delete, address: location.formatted_address })}
                                                                                className="btn btn-location-delete"
                                                                                style={{ padding: '.3rem' }}
                                                                        >
                                                                                <i className="fa fa-trash" />
                                                                        </button>
                                                                </p>
                                                                {
                                                                        locations[index + 1] && <hr />
                                                                }
                                                        </>
                                                ))
                                        }
                                </span>
                        </div >
                        {
                                showModal
                &&
                <LocationModal
                        closeModal={closeModal}
                        onComplete={setLocationState}
                        dataLink={actionUrl}
                        googleApiKey={googleApiKey}
                        defaultData={defaultData}
                />
                        }
                        {
                                showDeleteModal
                &&
                <DeleteModal
                        url={deleteLink}
                        isOpen={showDeleteModal}
                        closeModal={closeDeleteModal}
                        title={'Esta seguro de eliminar esta ubicación?'}
                        onComplete={() => setLocationState(locationState.filter(val => val.formatted_address !== removeElement))}
                        message={'Ubicación eliminada'}
                />
                        }
                </>
        )
}

export default Location