import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Button } from 'primereact/button';
import { Column } from 'primereact/column';
import { DataTable } from 'primereact/datatable';
import { ProgressSpinner } from 'primereact/progressspinner';
import { PageToolbar, SearchInput } from './shared/ui';

const Shareholder = () => {
    const [items, setItems] = useState([]);
    const [search, setSearch] = useState('');
    const [is_loading, setIsLoading] = useState(true);

    const list = async () => {
        setIsLoading(true);
        try {
            let response = await axios.get('/shareholder/list');
            setItems(response.data);
        } catch (error: any) {
            console.log(error.response);
            console.error('Failed to fetch items:', error);
        } finally {
            setIsLoading(false);
        }
    };

    useEffect(() => { list(); }, []);

    return (
        <div>
            <PageToolbar
                title="Shareholders"
                filters={<SearchInput value={search} onChange={setSearch} placeholder="Search shareholders…" />}
                actions={<Button icon="pi pi-refresh" onClick={list} className="p-button-text p-button-sm" />}
            />
            <div className='my-3'>
                {is_loading ? (<ProgressSpinner style={{ width: '2rem', height: '2rem' }} className="mr-3"></ProgressSpinner>) : null}
                <DataTable value={items} tableStyle={{ minWidth: '50rem' }} paginator rows={10}
                    globalFilter={search} globalFilterFields={['name', 'firstname', 'lastname']}
                    emptyMessage="No shareholders found.">
                    <Column field="name" header="Name" sortable filter></Column>
                    <Column field="firstname" header="First Name" sortable></Column>
                    <Column field="lastname" header="Last Name" sortable></Column>
                </DataTable>
            </div>
        </div>
    );
};

export default Shareholder;