import DataService from '../services/DataService';
import Employee from '../models/Employee';
import Position from '../models/Position';
import { useState, useEffect } from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import Company from '../models/Company';
import { Link} from "react-router-dom";
import withAuth from './withAuth';
function ReportEmployeePosition(props) { 
    const headersEmp = [
        {name: 'surname', label: "Фамилия"}, 
        {name: 'name', label: "Имя"}, 
        {name: 'positionsString', label: 'Должности'},
        {name: 'phoneNumber', label: "Номер телефона"},
    ];


    const url = "/employee/position?pos=id"
    const urlPos = '/position';

    const [itemsPos, setItemsPos] = useState([]);

    const [itemsEmp, setItemsEmp] = useState([]);

    useEffect(() => {      
        loadItemsPositions();
    });

    function loadItemsPositions() {
        DataService.readAll(urlPos, (data) => new Position(data))
            .then(data => setItemsPos(data));
    }

    function loadItemsEmployees(selectedPosition) {
        DataService.readAll(url.replace("id", selectedPosition), (data) => new Employee(data))
            .then(data => setItemsEmp(data)); 
    }

    return <div className="container-lg pt-5 min-vh-100">
        <h1>Отчет</h1>
        
        <Form.Select onChange={(e) => {loadItemsEmployees(e.target.value)}} aria-label="Default select example">
        <option selected disabled>Выберите должность</option>
            {
                itemsPos.map((e) => <option key={`emp_${e.id}`} value={`${e.id}`}>{`${e.name}`}</option>)
            } 
        </Form.Select>
        
        <div >
            <table className={`table table-hover`}>
            <thead>
                    <tr>
                        {
                        headersEmp.map((header) => <th key={header.name}>{header.label}</th>)
                        }
                        <th key='company'>Компания</th>
                    </tr>
            </thead>
            <tbody>
                    {
                    itemsEmp.map((item) => <tr key={item.id}>
                         {
                            headersEmp.map((header) => <td key={`${header.name}_${item.id}`}>{item[header.name]}</td>)
                        }
                        <td key={`comp_${item.id}`}><Link to={`/company/${item['company'].id}`}>{item['company'].name}</Link></td>
                    </tr>)
                    }
            </tbody>
        </table>
        </div>
  </div>
}

export default withAuth(ReportEmployeePosition);