import Position from "../models/Position";
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import { useState, useEffect } from 'react';
import DataService from '../services/DataService';
import Catalog from "./Catalog.jsx";
import withAuth from './withAuth';

function Positions(props) {
    const headers = [
        {name: 'name', label: "Название"},         
    ];
    
    const nameCatalog = "Должности";
    const url = '/position';
    const requestParams = '?name=nameData';

    const [items, setItems] = useState([]);
    const [data, setData] = useState(new Position());

    const [isEditing, setEditing] = useState(false);
    useEffect(() => {        
        loadItems();
    }, []);

    
    function loadItems() {
        DataService.readAll(url, (data) => new Position(data))
            .then(data => setItems(data));
    }

    function handleAdd() {
        DataService.create(url +requestParams
            .replace("nameData", data.name))
            .then(() => loadItems()); 
    }

    function handleEdit(editedId) {
        DataService.read(url + "/" + editedId, (e) => new Position(e))
        .then(data => {
            setData(new Position(data));
        });
        setEditing(true);
        
    }
    function handleEditIsDone() {
        DataService.update(url + "/" + data.id + requestParams
        .replace("nameData", data.name)).then(() => loadItems());
        
    }

    function handleDelete(item) {
        if (window.confirm('Удалить выбранный элемент?')) {
            const promises = [];
            promises.push(DataService.delete(url + "/" + item));
            Promise.all(promises).then(() => {
                loadItems();
            });
        }
    }

    // при каждом изменении поля формы происходит вызов этого метода, обновляя данные объекта
    function handleFormChange(event) {
        setData({ ...data, [event.target.name]: event.target.value });
    }

    // определяет действия формы по нажатию Отправить
    function submitForm() {     
        if (!isEditing) {
            // если добавление элемента
            handleAdd();
        } else {
            // если редактирование элемента;
            handleEditIsDone();
            setEditing(false);
        }
    }
    // вызывается при закрытии модального окна или по нажатию кнопки Добавить и очищает данные объекта
    function reset() {        
        setData(new Position());
        setEditing(false);
    }

     // для каждого типа сущности своя форма, 
    // которая передается дальше в абстрактный компонент Catalog в качестве props.form
    const form = <Form onSubmit={submitForm}>
                    <Form.Group className="mb-3" controlId="name">                       
                        <Form.Label>Название</Form.Label>
                        <Form.Control name="name" value={data.name} type="input" placeholder="Enter text" onChange={handleFormChange} required/>                      
                    </Form.Group>              
                    <Button variant="primary" type="submit">
                        Отправить
                    </Button>
                </Form>

    return <div className="container-lg pt-5 min-vh-100">
        <Catalog name={nameCatalog}
                    headers={headers} 
                    items={items} 
                    onAdd={handleAdd}
                    onEdit={handleEdit}
                    onDelete={handleDelete}
                    onClose={reset}
                    onBtnAdd={reset}
                    form={form} 
                    role={props.role}>
        </Catalog>
    </div>
}

export default withAuth(Positions);