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

interface Business {
  businessName: string;
  type: string;
}
function ListBusinesses() {
  const businesses = useSelector((state: any) => state.business.businesses);
  const dispatch = useDispatch();
  useEffect(() => {
    console.log("lB");
    dispatch(fetchBusinesses());
  }, [dispatch]);

  const columns: GridColDef[] = [
    { field: "id", headerName: "ID", width: 70 },
    { field: "businessName", headerName: "Business Name", width: 170 },
    { field: "type", headerName: "Business type", width: 170 },
    {
      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);
          });
        };
        return (
          <Button
            onClick={onClick}
            color="secondary"
            startIcon={<DeleteIcon />}
          >
            Delete
          </Button>
        );
      },
    },
  ];

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

  const requestSearch = (searchedVal: string) => {
    const filteredRows = data.outlets.filter((row: any) => {
      return row.businessName.toLowerCase().includes(searchedVal.toLowerCase());
    });
    console.log({ filteredRows });
    setItems(filteredRows);
  };
  const data = {
    outlets: [],
  };

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

  useEffect(() => {
    setItems(businesses);
  }, [businesses]);
  return (
    <div>
      My Business
      <Box margin={1}>
        <Button variant="contained" color="primary">
          {" "}
          <Link
            style={{ color: "white", textDecoration: "none" }}
            to="/settings/business/new"
          >
            Open New Business
          </Link>
        </Button>
      </Box>
      <SearchBar
        value={searched}
        onChange={(searchVal) => requestSearch(searchVal)}
        onCancelSearch={() => cancelSearch()}
      />
      <div style={{ height: '400px', width: "100%" }}>
        <DataGrid
          rows={businesses}
          columns={columns}
          pageSize={4}
          checkboxSelection
        />
      </div>
    </div>
  );
}

export default ListBusinesses;