import React, { useEffect, useState } from "react";
import {
    DataGrid,
    GridColDef,
    GridValueGetterParams,
    GridApi,
    GridCellValue,
} from "@material-ui/data-grid";
import SearchBar from "material-ui-search-bar";
import { Link } from "react-router-dom";
import { Box, Button, Container, Grid } from "@material-ui/core";
import DeleteIcon from '@material-ui/icons/Delete';


interface RegisterInput {
    registerName: string;
    firstNumber: number;
    prefix: string;
    suffix: string;
    outlet_name: string;
    outlet_id: string;
    recipt_id: string;
    bussiness_id: string;
    open: boolean;
}


export default function ShowRegister() {
    const data = {
        registers:[]
    }

    const columns: GridColDef[] = [
        { field: "id", headerName: "ID", width: 70 },
        { field: "name", headerName: "Register Name", width: 130 },
        { field: "outlet_name", headerName: "Outlet", width: 130 },
        { field: "open", headerName: "Is Open", width: 130 },


        {
            field: "button",
            headerName: "Button",
            sortable: false,
            width: 100,
            disableClickEventBubbling: true,
            renderCell: (params) => {
                const onClick = async () => {
                    const api: GridApi = params.api;
                    const fields = api
                        .getAllColumns()
                        .map((c) => c.field)
                        .filter((c) => c !== "__check__" && !!c);
                    const thisRow: Record<string, GridCellValue> = {};

                    fields.forEach((f) => {
                        thisRow[f] = params.getValue(f);
                    });

                    // const result = await deleteRegister({
                    //     variables: {
                    //         id: `${thisRow.id}`,
                    //     },
                    // });

                    // return alert(JSON.stringify(result.data, null, 4));
                };

                return <Button onClick={onClick} color='secondary' startIcon={<DeleteIcon />}>Delete</Button>;
            },
        },
    ];



    // const originalRows: OutletInput[] = data.outlets ;

    const [items, setItems] = useState<RegisterInput[]>([]);
    const [searched, setSearched] = useState<string>("");

    // useEffect(()=> {
    //   setItems(
    //     data.outlets
    //   )
    // },[data])

    const requestSearch = (searchedVal: string) => {
        const filteredRows = data.registers.filter((row: any) => {
            return row.name.toLowerCase().includes(searchedVal.toLowerCase());
        });
        setItems(filteredRows);
    };

    const cancelSearch = () => {
        setSearched("");
        requestSearch(searched);
    };

    return (
        <Container>
            <Grid container>
                <Grid item sm={10}>
                    <Box margin={1}>
                        <h3 style={{ textAlign: "center", flex: 1.2 }}>Register LIST</h3>
                    </Box>
                </Grid>
                <Grid item sm={2}>
                    <Box margin={1}>
                        <Button variant="contained" color="primary">
                            {" "}
                            <Link
                                style={{ color: "white", textDecoration: "none" }}
                                to="/settings/registers/new"
                            >
                                Create Register
              </Link>
                        </Button>
                    </Box>
                </Grid>
            </Grid>

            <SearchBar
                value={searched}
                onChange={(searchVal) => requestSearch(searchVal)}
                onCancelSearch={() => cancelSearch()}
            />

            <div style={{ height: 500, width: "100%" }}>
                <DataGrid
                    rows={data ? data.registers : []}
                    columns={columns}
                    pageSize={4}
                    checkboxSelection
                />
            </div>
        </Container>
    );
}