import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import {Box, Button, IconButton, Toolbar, useTheme} from "@mui/material";
import AccountType from "../../components/Account";
import {useTranslation} from "react-i18next";
import {DataGrid, GridColDef, GridRowId, GridRowSelectionModel} from "@mui/x-data-grid";
import {useState} from "react";

export default function AccountsInfo() {
    const theme = useTheme();
    const {t} = useTranslation();

    function handleCustomerEdit(account: AccountType) {
        //TODO: implement
        console.log("CustomerEdit", account);
    }
    
    const _rows: AccountType[] = [
        {
            id: 1,
            customer: {id: 0, name: 'Big', surname: 'Smoke', address: "Grove Str", country: "USA", zip: "66424"},
            langI18n: "en",
            admin: false,
            email: "smoke@trainwatchers.com",
            password: "$1$s11alt$h111ash"
        },
        {
            id: 2,
            customer: {id: 0, name: 'C', surname: 'J', address: "Grove Str", country: "USA", zip: "66424"},
            langI18n: "en",
            admin: true,
            email: "cj@grv.gov",
            password: "$1$salt$hash"
        },
        {
            id: 3,
            customer: {
                id: 0,
                name: 'Flo',
                surname: 'Rian',
                address: "Weihbachstreet 555",
                country: "Germany",
                zip: "66424"
            },
            langI18n: "de",
            admin: false,
            email: "flo@ryan",
            password: "$1$salt$hash"
        },
        {
            id: 41,
            customer: {
                id: 0,
                name: 'Tim',
                surname: 'Wand',
                address: "Wandstraße 12",
                country: "Deutschland",
                zip: "66420"
            },
            langI18n: "de",
            admin: true,
            email: "management@shitposting.eu",
            password: "$5$sa23123lt$has21212h"
        },
        {
            id: 15,
            customer: {
                id: 0,
                name: 'Lia',
                surname: 'Shaprius',
                address: "Malstatter Str 18",
                country: "Saarbrooklyn",
                zip: "66117"
            },
            langI18n: "de",
            admin: false,
            email: "lia.prius@outlook.de",
            password: "$1$salt$hash"
        },
        {
            id: 17,
            customer: {
                id: 0,
                name: 'Mathu-san',
                surname: 'Saravanpavan',
                address: "Solarbro-Alee",
                country: "Deutschland",
                zip: "66000"
            },
            langI18n: "de",
            admin: false,
            email: "mathusan@bro.de",
            password: "$12$salt12$hash123"
        },
        {
            id: 81,
            customer: {id: 0, name: 'C', surname: 'J', address: "Grove Str", country: "USA", zip: "66424"},
            langI18n: "en",
            admin: false,
            email: "flo@ryan",
            password: "$1$salt$hash"
        },
        {
            id: 19,
            customer: {id: 0, name: 'C', surname: 'J', address: "Grove Str", country: "USA", zip: "66424"},
            langI18n: "en",
            admin: false,
            email: "flo@ryan",
            password: "$1$salt$hash"
        },
    ]
/*
    for testing purposes
    for (let i = 0; i < 100; i++) {
        _rows.push(_rows[5]);
    }
* */

    //TODO: get per REST
    const [rows, setRows] = useState<AccountType[]>(_rows);
    const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());

    const handleSelectionChange = (newSelection: GridRowSelectionModel) => {
        setSelectedRows(newSelection.ids);
    };

    const handleDeleteSelected = async () => {
        selectedRows.forEach((row) => {
            //TODO: send delete command, or send deleteall
            console.log(row);
        })

        setRows(rows.filter((row) => !selectedRows.has(row.id)));
    };

    const columns: GridColDef<(typeof rows)[number]>[] = [
        {field: 'id', headerName: 'ID', width: 60},
        {
            field: 'admin',
            headerName: t('admin'),
            type: "boolean",
            width: 90,
            editable: true
        },
        {
            field: 'email',
            headerName: t('email'),
            width: 150,
            editable: true,
        },
        {
            field: 'langI18n',
            headerName: t('language'),
            width: 150,
            editable: true,
        },
        { //edit billing information button
            field: "customer",
            headerName: t('address'),
            width: 90,
            sortable: false,
            disableReorder: true,
            disableColumnMenu: true,
            renderCell: params => <IconButton onClick={() => handleCustomerEdit(params.row)}> <EditIcon/> </IconButton>,
        }
    ];

    return (
        <Box
            className="page-table"
            sx={{
                backgroundColor: theme.palette.background.paper,
                color: theme.palette.text.secondary
            }}
        >
            <DataGrid
                rows={rows}
                columns={columns}
                initialState={{}}
                checkboxSelection
                disableRowSelectionOnClick
                onRowSelectionModelChange={handleSelectionChange}
                slots={{ toolbar: () => (
                    <Toolbar>
                        <Button
                            variant="contained"
                            color="error"
                            startIcon={<DeleteIcon/>}
                            onClick={handleDeleteSelected}
                            disabled={selectedRows.size === 0}
                            sx={{
                                marginRight: 1
                            }}
                        >
                            {t('deleteAccount')}
                        </Button>
                    </Toolbar>
                    )}}
                showToolbar
                processRowUpdate={(updatedRow) => {
                    setRows(rows.map(row => row.id === updatedRow.id ? updatedRow : row));
                    //TODO: make REST callback
                    return updatedRow;
                }}
            />
        </Box>
    );
}
