import { Button, Spinner, Table, TableBody, TableCell, TableCellActions, TableCellLayout, TableRow } from '@fluentui/react-components';
import { Add12Regular, DeleteRegular, EditRegular } from '@fluentui/react-icons';
import type { CustomCellRendererProps } from 'ag-grid-react';
import axios from 'axios';
import useSWR from 'swr';

export default (params: CustomCellRendererProps) => {
    const { data: fuelTypes } = useSWR('/fuel/fuel-types', () => axios.get(`/fuel/fuel-types`, {
        baseURL: import.meta.env.VITE_API_NEST_URL
    }).then(res => res.data))

    if (fuelTypes) {
        return (
            <div style={{ display: 'flex', flexDirection: 'column', padding: '0.25rem', gap: '0.5rem' }}>
                {Array.isArray(params.value) && params.value.length > 0 &&
                    <Table style={{ width: '100%' }} size='small'>
                        <TableBody>
                            {Array.isArray(params.value) && params.value.map(fuel => (
                                <TableRow key={`${fuel.id}`}>
                                    <TableCell>
                                        <TableCellLayout truncate>
                                            {fuel.name}
                                        </TableCellLayout>
                                    </TableCell>
                                    <TableCell>
                                        <TableCellLayout truncate>
                                            {fuelTypes && Array.isArray(fuelTypes) &&
                                                fuelTypes.find(ft => ft.id === fuel.id_fuels).name
                                            }
                                        </TableCellLayout>

                                        <TableCellActions>
                                            <Button icon={<EditRegular />} appearance='subtle' />
                                            <Button icon={<DeleteRegular color='red' />} appearance='subtle' />
                                        </TableCellActions>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                }

                <Button style={{ width: 'min-content' }} appearance='primary' icon={<Add12Regular />} size='small'>
                    Добавить
                </Button>
            </div>
        );
    } else {
        return (
            <Spinner />
        )
    }
}