SelectAutocomplete

import React from 'react';
import { useEffect, useState } from 'react';
import { MethodHttp } from '../../http';
import { makeStyles } from '@material-ui/core/styles';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { 
	Grid,
	TextField,
	IconButton,
	CircularProgress 
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';



const http = new MethodHttp();

const useStyles = makeStyles((theme) => ({
	wrapperAutocomplete: {
		'& > * + *': {
			marginTop: theme.spacing(3)
		}
	},
	btnGrid: {
		display: 'flex'
	}
}));
export function SelectMethod({ value, onChange }) {
	const classes = useStyles();
	const [rows, setRows] = useState([{
		options: []
	}]);
	const [methods, setMethods] = useState([]);
	let selected = null;

	useEffect(() => {
		const fetchData = async () => {
			try {
				const { response } = await http.selectList();
				
				setMethods(response);
				setRows(prev => {
					prev[0].options = response;
					return prev;
				});
			}
			catch(err) {
				console.log(err);
			}
		}
		fetchData();
		return () => http.cancel();
	}, [ ]);

	const updateRows = (newRows) => {
		for (const i in newRows) {
			if (selected == i) continue;

			const selector = newRows[selected];
			const curr = newRows[i];
			let index = curr.options.findIndex(x => x.id === selector?.method?.id);

			if (index === 0) { // remove first
				curr.options = curr.options.slice(1);
			}
			else if (index === curr.options.length -1) { // remove last
				curr.options = curr.options.slice(0, -1);
			}	
			else if (index > 0) {
				curr.options = [
					...curr.options.slice(0, index),
					...curr.options.slice(index+1)
				];
			}
			if (!selector.last) continue;
			if (curr.options.findIndex(x => x.id === selector?.last?.id) > -1) continue;
			curr.options.push(selector.last);
		};	
		return newRows;
	};

	const handleRemoveItem = (index) => (event) => {
		let newRows = [...rows];
		newRows[index].last = newRows[index].method;
		newRows[index].method = null; 
		selected = index;

		newRows = updateRows(newRows);
		let toUpdate = [];

		if (index === 0 && rows.length > 1) { // remove first
			toUpdate = toUpdate.concat(newRows.slice(1));
		}
		if (index === newRows.length -1) { //remove last
			toUpdate = toUpdate.concat(newRows.slice(0, -1));
		}
		else if (index > 0) {
			toUpdate = toUpdate.concat(
				newRows.slice(0, index),
				newRows.slice(index +1)
			);
		}
		setRows(toUpdate);
	};

	const handleAddItem = (event) => {
		const newRows = [...rows];
		newRows.push({
			options: newRows[newRows.length -1].options
		});
		selected = newRows.length -2;
		setRows(updateRows(newRows));
	};

	const handleChangeAutocomplete = (field, index) => (event, value) => {
		const newRows = [...rows];
		newRows[index] = {
			...newRows[index],
			[field]: value,
			last: newRows[index][field]
		};
		selected = index;
		setRows(updateRows(newRows));
	};
	
	const handleChange = (field, index) => (event) => {
		const newRows = [...rows];
		newRows[index] = {
			...newRows[index],
			[field]: event.target.value	
		};
		setRows(newRows);
	};

	return (
		<>
			{rows.map((row, index) => (
				<Grid key={index} container spacing={4}>
					<Grid item xs={12} sm={12} md={5}>
						<div className={classes.wrapperAutocomplete}>
							<Autocomplete
								id={`select-method-${index}`}
								options={row.options}
								getOptionLabel={(option) => option.name ?? ''}
								value={row.method ?? null}
								onChange={handleChangeAutocomplete('method', index)}
								renderInput={(params) => (
									<TextField
										{...params}
										variant="standard"
										label="Metodos"
										placeholder="Metodos"
									/>
								)}
							/>
						</div>
					</Grid>
					<Grid item xs={12} sm={12} md={6}>
						<TextField 
							fullWidth
							id="method-link"
							label="Link"
							value={row.link}
							onChange={handleChange('link', index)}
						/>
					</Grid>
					<Grid 
						item 
						xs={12} 
						sm={12} 
						md={1}
						justify="center"
						alignItems="flex-end"
						className={classes.btnGrid}
					>
						<IconButton 
							color="secondary"
							onClick={handleRemoveItem(index)}
							disabled={index === 0 && rows.length <= 1}
						>
							<RemoveIcon />	
						</IconButton>
					</Grid>
				</Grid>
			))}
			<IconButton 
				color="primary" 
				onClick={handleAddItem}
				disabled={rows.length === 0 || rows.length >= methods.length}
			>
				<AddIcon />
			</IconButton>
		</>
	);
};