Notes

import React, { useState, useEffect, useContext } from "react";
// import EditIcon from '@material-ui/icons/Edit';
// "@mui/material/LaunchIcon";
import { useNavigate, useParams } from "react-router-dom";
import LaunchIcon from "@mui/icons-material/Launch";
import CloseIcon from "@mui/icons-material/Close";
import IconButton from "@mui/material/IconButton";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
// import IconButton from "@mui/icons-material/Icon";
// import CloseIcon from "@material-ui/icons/Close";
// import IconButton from "@material-ui/core/IconButton";
import Checkbox from "@mui/material/Checkbox";
import InputAdornment from "@mui/material/InputAdornment";
import SearchIcon from "@mui/icons-material/Search";
// import SearchIcon from "@material-ui/icons/Search";
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Button,
DialogTitle,
DialogContent,
DialogActions,
} from "@mui/material";
import { Toolbar } from "@mui/material";
import { Container, Stack } from "@mui/system";
import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Unstable_Grid2/Grid2";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import CustomerContext from "../../context/customer/CustomerContext";
import Dialog from "@mui/material/Dialog";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Backdrop from "@mui/material/Backdrop";
import _ from "lodash";

function ClientLookup(props) {
const customerContext = useContext(CustomerContext);
const { customers, selectedCustomer, setCurrentCustomer } = customerContext;
//const [isPopUpVisible, setIsPopUpVisible] = useState(false);
const [open, setOpen] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
let { clientId } = useParams();
const [_clientId, setClientId] = useState(clientId);
const [client, setClient] = useState(null);
const [filteredItems, setFilteredItems] = useState([]);
const [customerList, setCustomerList] = useState([]);
const [selectCustomer, setSelectedCustomer] = useState(null);
const [selectedCustomerObj, setSelectCustomerObj] = useState(null);
const [changedCustomer, setChangedCustomer] = useState(null);
const [isBannerVisible, setIsBannerVisible] = useState(false);
const theme = useTheme();

const fullScreen = useMediaQuery(theme.breakpoints.down("md"));

const navigate = useNavigate();
function handleNavigatebefore() {
navigate("/");
}

const customerSelected = (val) => {
console.log("SELECT VALUE", val);
setSelectCustomerObj(val);
setSelectedCustomer(val.customerName);
};
function handleEditClick() {
setOpen(true);
}

function handleClose() {
setOpen(false);
}

function handleBannerClick() {
setIsBannerVisible(!isBannerVisible);
}
function handleCloseClick1() {
setIsBannerVisible(false);
}

// useEffect(() => {
// fetch("")
// .then((response) => response.json())
// .then((data) => setItems(data));
// }, []);
useEffect(() => {
getCustomerList();
if (selectedCustomer) {
setClient((cust) => selectedCustomer);
}
return () => {
console.log("@@Resetting cust:");
setCurrentCustomer([]);
};
}, []);

const getCustomerList = () => {
fetch(
"https://jsitracknowdevapi.azurewebsites.net/api/Customer/CustomerList"
)
.then((response) => response.json())
.then((data) => setCustomerList(data));
};

function handleSearchChange(event) {
// setSearchTerm(event.target.value);
setSearchTerm(event.target.value);
let customerArr = customerList;
if (event.target.value != "") {
let searchedArr = customerArr.filter((customer) => {
return customer.customerName
.toLowerCase()
.includes(event.target.value.toLowerCase());
});
setCustomerList(searchedArr);
} else if (event.target.value == "") {
getCustomerList();
}
}

function handleSearchClick() {
// const filtered = items.filter(
// (item) => item.name.includes(searchTerm) || item.id === searchTerm
// );
// setFilteredItems(filtered);
}

function getCustomer(customerId) {
console.log("Cust Selecyted Rec", customers);
if (customers) {
const _custRecs = customers.filter(
(cust) => cust.customerId == customerId
);
console.log("Cust Selecyted Recs", _custRecs);
return _custRecs[0];
} else return null;
}

const handleChange = (event) => {
console.log("selectCustomer:", selectCustomer);
console.log("selectedCustomerObj:", selectedCustomerObj);
console.log("changedCustomer:", changedCustomer);
console.log("_clientId:", _clientId);
console.log("changedCustomer:", changedCustomer);

setChangedCustomer(selectCustomer);
// const {
// target: { value },
// } = event;
// const _client = getCustomer(selectedCustomerObj.customerId);
// console.log("$$VAL_clientId:", selectedCustomerObj.customerId);
props.setSelectedClientId(() => selectedCustomerObj.customerId);
setCurrentCustomer(selectedCustomerObj);
setClient((cust) => selectedCustomerObj);
setOpen(false);
navigate(`/${props.parentRoute}/${selectedCustomerObj.customerId}`);
};

function MouseOver(event) {
event.target.style.background = "#BDBDBD";
}
function MouseOut(event) {
event.target.style.background = "";
}

const isItemSelected = (value) => {
console.log("Check Item:", value);
console.log("Ref Item:", selectedCustomerObj?.customerId);
return selectedCustomerObj?.customerId === value;
};

const getBusinessCategories = (categories) => {
return _.map(categories, "businessCategoryName").join(", ");
};

return (
<Container>
<Grid>
<Toolbar
style={{
marginTop: "20px",
maxWidth: "100%",
borderRadius: "10px",
backgroundColor: "#FAFAFA",
flexWrap: "wrap",
zIndex: 11,
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
width: "100%",
}}
>
<div style={{ display: "flex" }}>
<NavigateBeforeIcon
style={{ color: "#757575", cursor: "pointer" }} onClick={handleNavigatebefore}
/>
<div style={{ mr: "2rem" }}>
{client && client.customerName
? client.customerName
: "Please Select a Client"}
</div>

<LaunchIcon
onClick={handleEditClick}
style={{
fontSize: "1.3em",
cursor: "pointer",
color: "#757575",
}}
/>
</div>
<div style={{ display: "flex" }} onClick={handleBannerClick}>
<Typography style={{ color: "blue", cursor: "pointer" }}>
View Details
</Typography>
<KeyboardArrowRightIcon style={{ color: "blue",cursor:"pointer"}} />
</div>
</div>

{isBannerVisible && (
<Paper
style={{
marginTop: "-22px",
marginLeft: "-28px",
marginRight: "-22px",
backgroundColor: "#FAFAFA",
width: "107%",
}}
>
<Toolbar style={{ minHeight: "40px" }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
width: "100%",
}}
>
<div style={{ display: "flex" }}>
<NavigateBeforeIcon
style={{ color: "#757575", cursor: "pointer" }}
/>

{selectCustomer != "" ? (
<div style={{ marginLeft: "10px" }}>
{changedCustomer}
</div>
) : (
""
)}
<LaunchIcon
onClick={handleEditClick}
style={{
fontSize: "1.3em",
color: "#757575",
marginLeft: "10px",
cursor: "pointer",
}}
/>
</div>
<div>
<CloseIcon
onClick={handleCloseClick1}
style={{ cursor: "pointer" }}
/>
</div>
</div>
</Toolbar>
<Grid container spacing={2}>
<Grid item xs={12}>
<TableContainer
style={{ paddingLeft: "27px", paddingRight: "25px"}}
>
<TableHead>
<TableCell style={{ color: "#9E9E9E",height:"5vw",width:"5vw" }}>ID</TableCell>
<TableCell style={{ color: "#9E9E9E",height:"5vw",width:"10vw" }}>
Client Name
</TableCell>
<TableCell style={{ color: "#9E9E9E",height:"5vw",width:"10vw"}}>
Category
</TableCell>
<TableCell style={{ color: "#9E9E9E",height:"5vw",width:"10vw" }}>
Address
</TableCell>
<TableCell style={{ color: "#9E9E9E",height:"5vw",width:"10vw"}}>
Tax Number
</TableCell>
<TableCell style={{ color: "#9E9E9E",height:"5vw",width:"10vw" }}>
Phone/Mail
</TableCell>
<TableCell style={{ color: "#9E9E9E",height:"5vw",width:"5vw" }}>
Jurisdiction
</TableCell>
<TableCell style={{ color: "#9E9E9E",height:"5vw",width:"15vw" }}>Notes</TableCell>
</TableHead>
<TableBody>
<TableCell style={{height:"5vw",width:"5vw"}}>{client?.customerId}</TableCell>
<TableCell style={{height:"5vw",width:"10vw"}}>{client?.customerName}</TableCell>
<TableCell style={{height:"5vw",width:"10vw"}}>
{getBusinessCategories(client?.businessCategory)}
</TableCell>
<TableCell style={{height:"5vw",width:"10vw"}}>{client?.address}</TableCell>
<TableCell style={{height:"5vw",width:"10vw"}}>{client?.taxNumber}</TableCell>
<TableCell style={{height:"5vw",width:"10vw"}}>{client?.phone}</TableCell>
<TableCell style={{height:"5vw",width:"5vw"}}>{client?.juristiction}</TableCell>
<TableCell style={{height:"5vw",width:"15vw"}}>{client?.notes}</TableCell>
</TableBody>
</TableContainer>
</Grid>
</Grid>
</Paper>
)}
</Toolbar>
</Grid>

<Dialog
// fullScreen={fullScreen}
open={open}
onClose={handleClose}
aria-labelledby="responsive-dialog-title"
sx={{ backdropFilter: "blur(0.5px)" }}
>
<Box
style={{
backgroundColor: "rgb(224 224 224 / 49%)",
}}
>
<Stack
display="flex"
direction="row"
spacing={20}
alignItems="center"
sx={{ backgroundColor: "rgb(224 224 224 / 49%" }}
>
<DialogTitle
sx={{ fontWeight: "normal", fontSize: "21px", color: "#424242" }}
>
{" "}
CHANGE CLIENT
</DialogTitle>
<CloseIcon onClick={handleClose} style={{ cursor: "pointer" }} />
</Stack>
</Box>
<DialogContent>
<Box
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: "5px",
height: "10%",
marginTop: "10px",
}}
>
<TextField
style={{
width: "45ch",
height: "5ch",
backgroundColor: "rgb(224 224 224/ 49%)",
borderRadius: "10px",
padding: "6px 10px 0px",
fontStyle: "italic",
textAlign: "center",
marginTop: "5px",
}}
variant="standard"
placeholder="search clients"
value={searchTerm}
onChange={handleSearchChange}
InputProps={{
disableUnderline: true,
endAdornment: (
<InputAdornment position="end">
<IconButton>
<SearchIcon />
</IconButton>
</InputAdornment>
),
}}
/>
</Box>
</DialogContent>

<TableContainer
sx={{
maxHeight: 240,

overflow: "auto",
width: "93%",
}}
>
<Container>
<Table>
<TableBody>
{customerList.map((customer, index) => (
<TableRow
key={customer.customerId}
hover
role="checkbox"
selected={
selectedCustomerObj?.customerId === customer.customerId
}
sx={{ cursor: "pointer" }}
onClick={(event) => customerSelected(customer)}
tabIndex={-1}
>
{/* <TableCell padding='checkbox'>
<Checkbox
color='primary'
checked={() =>
selectedCustomerObj?.customerId ===
customer.customerId
}
inputProps={{
"aria-labelledby": `cust-checkbox-${index}`,
}}
component='th'
id={`cust-checkbox-${index}`}
scope='row'
/>
</TableCell> */}
<TableCell
// onClick={() => customerSelected(customer)}
style={{
borderBottom: "none",
textAlign: "left",
fontSize: "12px",
color: "#424242",
fontWeight: "normal",

opacity: 1,
}}
>
{customer.customerName}
</TableCell>
<TableCell
style={{
borderBottom: "none",
padding: "11px",
textAlign: "right",
}}
>
{customer.customerId}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Container>
</TableContainer>

<Box
style={{
float: "right",
marginBottom: "10px",
marginRight: "29px",
}}
>
<DialogActions>
<Button
sx={{ mt: 3, ml: 1 }}
variant="standard"
style={{
justifyContent: "right",
marginRight: "30px",
color: "Blue",
backgroundColor: "white",
marginTop: "18px",
fontSize: "13px",
paddingRight: "13px",
height: "35px",
width: "77px",
}}
onClick={() => setOpen(false)}
color="default"
>
Cancel
</Button>
<Button
sx={{ mt: 3, ml: 1 }}
variant="standard"
style={{
justifyContent: "right",
color: "White",
backgroundColor: "blue",
marginTop: "18px",
fontSize: "12px",
paddingRight: "13px",
height: "35px",
width: "77px",
}}
color="primary"
onClick={handleChange}
>
Change
</Button>
</DialogActions>
</Box>
</Dialog>
</Container>
);
}
export default ClientLookup;