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 Company from "../models/Company";
import ModalForm from './commons/ModalForm';
import Employee from '../models/Employee';
import Position from '../models/Position';
import { useNavigate } from "react-router-dom";
import withAuth from './withAuth';

function Companies(props) {
    const headers = [
        {name: 'name', label: "Название"}, 
        {name: 'countEmployees', label: "Сотрудники"},
    ];
    const nameCatalog = "Компании";

    const url = '/company';
    const requestParams = '?name=nameData';

    const [items, setItems] = useState([]);
    

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

    function loadItems() {
        DataService.readAll(url, (data) => new Company(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 Company(e))
        .then(data => {
            setData(new Company(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 Company());
        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>;
    

    const [showModalForm, setShowChoosing] = useState(false);
    const formChooseCompany = <Form onSubmit={redirectToCompany}>
                                <Form.Group className="mb-3" controlId="name">                     
                                <Form.Label>Компания</Form.Label>
                                    <Form.Select name="name_select" type="input" onChange={(e) => {setChosenCompany(e.target.value)}} required>
                                        <option selected disabled>Выберите компанию</option>
                                    {
                                        items.map((company) => <option key={`company_${company.id}`} value={`${company.id}`}>{`${company.name}`}</option>)
                                    } 
                                    </Form.Select>                   
                                </Form.Group>                                        
                                <Button variant="primary" type="submit">
                                    Перейти
                                </Button>
                            </Form>;
    
    function showModalFormChoosing() {
        setShowChoosing(true);
    }
    function unshowModalFormChoosing() {
        setShowChoosing(false);
    }
    const [chosenCompany, setChosenCompany] = useState(0);
    const navigate = useNavigate();
    function redirectToCompany() {
        
        if (chosenCompany !== 0) {
            navigate(`/company/${chosenCompany}`);
        } 
    }

    return <div className="container-lg pt-5 min-vh-100">
        <Button onClick={showModalFormChoosing} variant="info">Перейти к компании</Button>
        <ModalForm show={showModalForm} onClose={unshowModalFormChoosing} modalTitle={"Выбор компаниии"} form={formChooseCompany}></ModalForm>
        <Catalog name={nameCatalog}
                    headers={headers} 
                    items={items} 
                    onAdd={handleAdd}
                    onEdit={handleEdit}
                    onDelete={handleDelete}
                    onClose={reset}
                    onBtnAdd={reset}
                    form={form}>
        </Catalog>
    </div>
}

export default withAuth(Companies);