import React, { useState, useEffect } from "react";

import { store } from "../../index";

import {
Label,
Card,
Form,
FormGroup,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
CardHeader,
CardBody,
CardFooter,
CardTitle,
Row,
Col,
// Table,
Input,
FormText,
UncontrolledTooltip,
ButtonGroup,
} from "reactstrap";
import { isEqual } from "lodash";
import Select from "react-select";
import { Link } from "react-router-dom";
import SweetAlert from "react-bootstrap-sweetalert";
// react plugin used to create charts
// react plugin for creating vector maps
import Modal from "../../components/Rukart/Modal/Modal";
import cabbage from "assets/img/cabbage.jpeg";
import brinjal from "assets/img/brinjal.jpeg";
import redChilly from "assets/img/redChilly.jpeg";
import { PanelHeader, Button, Progress } from "components";
import EditItemForm from
"../InnerComponents/SellersDashboard/EditItem"; //'../InnerComponents/EditItem.jsx'
import AddItemForm from "../InnerComponents/SellersDashboard/AddItem";
import Table from "views/Tables/ReactTable.jsx";

const images = { cabbage, brinjal, redChilly };

class Dashboard extends React.Component {

constructor(props) {
super(props);
this.state = {
items: [],
options: [],
companyItems: [],
multipleSelect: [],
updateItem: {},
addItem: {},
isEditModalOpen: false,
isAddModalOpen: false,
};
}
static formatOptions = (items) => {
return (
items &&
items.map((item) => ({
 value: item.name,
label: `${item.name}`,
id: item._id, //pass _id of array element also to make search faster logic
in backend
}))
);
};
editItem = (newItem) =>
this.setState({
updateItem: {
...this.state.updateItem,
...newItem,
},
});
updateItem = () => {
// @todo: add form FormvalidationFunction
const { updateItem, selectedItem } = this.state;
let {
isAddQuantity = "+",
changeQuantity,
quantity = selectedItem.quantity,
priceRetail,
minimumBulkQuantity,
priceBulk,
} = updateItem;
quantity =
isAddQuantity === "+"
? Number(quantity) + Number(changeQuantity)
: isAddQuantity === "-"
? Number(quantity) - Number(changeQuantity)
: Number(quantity);
let error;
if (priceRetail === null || priceRetail === "")
error = "Retail Price can't be null";
if (priceRetail < 0) error = "Retail Price can't be negative";
if (!(minimumBulkQuantity === null || minimumBulkQuantity === "")) {
if (priceBulk === null || priceBulk === "")
error = "priceBulk can't be null";
if (priceBulk < 0) error = "priceBulk can't be negative";
}
if (error) {
return alert(error);
}
const finalItem = {
quantity,
priceRetail,
minimumBulkQuantity,
priceBulk,
_id: selectedItem._id,
};
this.props.editCompanyDetails({
item: finalItem,
type: "EDIT_COMPANY_ITEM",
});
this.toggleModal();
};
addItem = (prop) => {
this.setState({
addItem: {
 ...this.state.addItem,
...prop,
},
});
};
addItemApi = () => {
const {
quantity,
priceRetail,
priceBulk,
minimumBulkQuantity,
productName,
unit,
} = this.state.addItem;
let error;
if (quantity === null || quantity === undefined || quantity === "")
error = "quantity can't be null";
if (quantity < 0) error = "quantity can't be negative";
if (priceRetail === null || priceRetail === undefined || priceRetail === "")
error = "Retail Price can't be null";
if (priceRetail < 0) error = "Retail Price can't be negative";
if (
!(
minimumBulkQuantity === null ||
minimumBulkQuantity === undefined ||
minimumBulkQuantity === ""
)
) {
if (priceBulk === null || priceBulk === undefined || priceBulk === "")
error = "priceBulk can't be null";
if (priceBulk < 0) error = "priceBulk can't be negative";
}
if (productName === "") error = "Please provide a product name";
if (unit === "") error = "Please provide a suitable unit";
if (error) {
return alert(error);
}
const finalItem = { quantity, priceRetail, priceBulk, productName, unit };
if (minimumBulkQuantity >= 0) {
finalItem.minimumBulkQuantity = minimumBulkQuantity;
finalItem.priceBulk = priceBulk;
}
this.props.editCompanyDetails({
item: finalItem,
type: "ADD_GLOBAL_ITEM",
});
this.toggleAddModal();
};
handleSelect = (value) => {
// this.setState({ multipleSelect: value });
this.props.editCompanyDetails({
itemIds: value.map((item) => item.id),
type: "ADD_COMPANY_ITEM",
});
};
removeItem = (key) => {
const myUpdatedItems = this.state.multipleSelect
.slice()
.filter((v, k) => k !== key);
 this.props.editCompanyDetails({
itemIds: myUpdatedItems.map((item) => item.id),
type: "ADD_COMPANY_ITEM",
});
// this.setState({ multipleSelect: myUpdatedItems });
};
toggleModal = (item) => {
const { isEditModalOpen } = this.state;
this.setState({
isEditModalOpen: !isEditModalOpen,
selectedItem: !isEditModalOpen ? item : undefined,
});
};
toggleAddModal = () =>
this.setState({
isAddModalOpen: !this.state.isAddModalOpen,
selectedItem: undefined,
});
static companyItemsUpdate = (companyItems, items) => {
if (!items.length) return [];
const options = Dashboard.formatOptions(items);
const updatedOptions = companyItems
? companyItems.map(
(item) => options.filter((option) => option.id === item.itemId)[0]
)
: [];
return updatedOptions;
};
static getDerivedStateFromProps(nextProps, prevState) {
const multipleSelect = Dashboard.companyItemsUpdate(
nextProps.companyItems,
nextProps.items
);
if (!isEqual(nextProps.companyItems, prevState.companyItems)) {
const companyItems = nextProps.companyItems.map((props, key) => ({
...nextProps.companyNewItemProps[key],
...props,
}));
return {
...prevState,
companyItems: companyItems,
options: Dashboard.formatOptions(nextProps.items),
multipleSelect,
};
} else if (!isEqual(nextProps.items, prevState.items)) {
return {
...prevState,
items: nextProps.items,
options: Dashboard.formatOptions(nextProps.items),
multipleSelect,
};
} else return null;
}

componentDidMount() {
const { companyItems, items } = this.state;
this.props.getItems();
this.props.fetchCompanyDetails();
// store.subscribe(this.companyItemsUpdate); //@todo: find why not updating
through connect on item update
}

shouldComponentUpdate(nextProps, nextState) {
if (nextProps.items.length === 0 && nextProps.companyItems.length > 0)
return false;
return true;
}

// componentDidUpdate(prevProps, prevState){
// if(!isEqual(this.state.companyItems, prevState.companyItems)){
// this.props.getItems();
// }
// }

renderTable = () => {
const { companyItems, companyNewItemProps, multipleSelect } = this.state;
const myItems = multipleSelect.map(
(si) => companyItems.filter((item) => item.itemId === si.id)[0] || {}
);
return (
<tbody>
{myItems.map((item, key) => {
const {
priceBulk = "-",
priceRetail = "-",
quantity = "-",
minimumBulkQuantity = "-",
dateAdded,
name = "",
unit = "",
image,
} = item;
return (
<tr>
<td>
<div className="img-container">
<img src={images[image && image.split(".")[0]]} alt="..." />:{"
"}
</div>
</td>
<td className="td-name">
<a href="#">{name}</a>
<br />
{/* <small>by Rukart </small> */}
</td>
<td className="td-name">
{quantity} {unit}
</td>
<td className="td-number">
<small>?</small>
{`${priceBulk}/${unit}`}
</td>
<td className="td-number">
<small>?</small>
{`${priceRetail}/${unit}`}
</td>
<td className="td-name">
{minimumBulkQuantity} {unit}
 </td>
<td key={key} className="text-right">
<Button
icon
color="info"
size="sm"
onClick={() =>
alert(
`Last modified by <to be added> at ${new Date(
dateAdded
).toLocaleString()}`
)
}
>
<i className="now-ui-icons users_single-02" />
</Button>{" "}
<Button
icon
color="success"
size="sm"
onClick={() => this.toggleModal(item)}
>
<i className="now-ui-icons ui-2_settings-90" />
</Button>{" "}
<Button
icon
color="danger"
size="sm"
onClick={(e) => this.removeItem(key)}
>
<i className="now-ui-icons ui-1_simple-remove" />
</Button>
</td>
</tr>
);
})}
<tr>
<td colSpan="4" />
<td colSpan="4" className="text-right">
<Button onClick={this.toggleAddModal} color="info" round>
Add Item <i className="now-ui-icons arrows-1_minimal-right" />
</Button>
<Modal
isModalOpen={this.state.isAddModalOpen}
toggleModal={this.toggleAddModal}
modalAction={this.addItemApi}
actionLabel="Add"
title="Add Item to Dashboard"
>
<AddItemForm addItem={this.addItem} />
</Modal>
</td>
</tr>
</tbody>
);
};
render() {
const { selectedItem, isEditModalOpen, items, options } = this.state;
return (
<div>
<PanelHeader size="sm" />
<div className="content">
{this.state.alert}
<Modal
isModalOpen={isEditModalOpen}
toggleModal={this.toggleModal}
modalAction={this.updateItem} //an action to set updat eitem state obj
actionLabel="Update"
title={selectedItem && selectedItem.name}
>
<EditItemForm
editItem={this.editItem}
item={this.state.selectedItem}
/>
</Modal>
<Row>
<Col xs={12} md={12}>
<Card>
<CardBody>
<Form>
<FormGroup>
<Label for="multiItemSelect">
Add Items to Dashboard:
</Label>
<Select
id="multiItemSelect"
className="warning"
multi={true}
closeOnSelect={false}
placeholder="Add items to My product list"
name="multipleSelect"
value={this.state.multipleSelect}
options={options}
onChange={this.handleSelect}
/>
</FormGroup>
</Form>

<Table responsive className="table-shopping">

<thead>
<tr>
<th className="text-center" />
<th>PRODUCT</th>
<th>INVENTORY</th>
<th className="text-right">RETAIL PRICE</th>
<th className="text-right">BULK PRICE</th>
<th className="text-left">MINIMUM BULK QUANTITY</th>
{/* <th className="text-left">Date of Harvest</th> */}
<th className="text-right">Actions</th>
</tr>
</thead>
{this.renderTable()}
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
 </div>
);
}
}
export default Dashboard;