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