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 () => {
          //RE
          //   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>
  );
}