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 axios from "axios";
import {useSelector} from 'react-redux'
import {Outlets} from '../../../api/agent'
// import {RootState} from '../../../store/index'

interface OutletInput {
  outletName: string;
  address: string;
  city: string;
  state: string;
  country: string;
  postal_code: string;
  phone: string;
  email: string;
  tax_rate: string;
  link_type: string;
  linked_outlets: string;
  copy_outlet: string;
  taxrate_id: string;
  business_id: string;
}


export default function ShowOutlets() {
  const outlets = useSelector((state:any) => state.outlet.outlets)
  // const isLight = useSelector((state) => state.ui.themeIsLight);

  const data = {
  outlets:[]
  }
  useEffect(() => {
    console.log('show outlets',{outlets})
    // axios.get('http://www.localhost:4000/business').then(
    //   d => console.log(d.data)
    // )
    // Outlets.list().then((d: any)=>console.log('data',d))
  },[])


  const columns: GridColDef[] = [
    { field: "id", headerName: "ID", width: 70 },
    { field: "name", headerName: "Outlet Name", width: 130 },
    { field: "city", headerName: "City", width: 130 },
    { field: "phone", headerName: "Phone", width: 130 },
    { field: "email", headerName: "Email", 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 deleteOutlet({
          //   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?data.outlets:[] ;

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

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

  const requestSearch = (searchedVal: string) => {
    const filteredRows = data.outlets.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 }}>OUTLET LIST</h3>
          </Box>
        </Grid>
        <Grid item sm={2}>
          <Box margin={1}>
            <Button variant="contained" color="primary">
              {" "}
              <Link
                style={{ color: "white", textDecoration: "none" }}
                to="/settings/outlets/new"
              >
                Open Outlet
              </Link>
            </Button>
          </Box>
        </Grid>
      </Grid>

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

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