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";
import { fetchReceipts } from "../../../store/receipt-action";
import { useDispatch, useSelector } from "react-redux";

interface ReceiptInput {
  templateName: string;
  tradingName: string;
  receiptType: string;
  showLogo: boolean;
  showOutletDetails: boolean;
  showCustomerDetails: boolean;
  headerText: string;
  footerText: string;
  numberPrefix: string;
  titleSubtotal: string;
  titleDiscount: string;
  showBarcode: boolean;
}

export default function ShowReceipt() {

  const receipts = useSelector((state: any) => state.receipt.receipts);
  const dispatch = useDispatch();
  useEffect(() => {
    console.log("lB");
    dispatch(fetchReceipts());
  }, [dispatch]);
  

  // const data = {
  //   receipts: [],
  // };

  const columns: GridColDef[] = [
    { field: "id", headerName: "ID", width: 70 },
    { field: "templateName", headerName: "Template Name", width: 130 },
    { field: "tradingName", headerName: "Trading Name", width: 130 },
    { field: "receiptType", headerName: "Receipt Type", 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 deleteReceipt({
          //     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<ReceiptInput[]>([]);
  const [searched, setSearched] = useState<string>("");

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

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

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

  useEffect(() => {
   setItems(receipts)
  }, [receipts])

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

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

      <div style={{ height: 500, width: "100%" }}>
        <DataGrid
          rows={receipts}
          columns={columns}
          pageSize={4}
          checkboxSelection
        />
      </div>
    </Container>
  );
}