object oriented Orders

import Button from '@material-ui/core/Button';
import Checkbox from '@material-ui/core/Checkbox';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import Paper from '@material-ui/core/Paper';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import SendIcon from '@material-ui/icons/Send';
import React, { useContext, useEffect, useState } from 'react';
import { CountryDropdown } from 'react-country-region-selector';
import { isMobile } from 'react-device-detect';
import Fade from 'react-reveal/Fade';
import { withRouter } from 'react-router-dom';
import { toast } from 'react-toastify';
import { ProductContext } from '../context';
import OrderStepper from './orderStepperClient';
import Recaptcha from './Recaptcha';
const domLoaded = require('dom-loaded');
// ? Use Dom Loaded and use spinner to await data
//! order to props.orders

// let orders = [
//   {
//     colorC: 'Red',
//     sizeC: '15',
//     url:
//       'https://stackoverflow.com/questions/49358716/reactjs-handle-multiples-exports-in-a-file-withrouter',

//     title: 'Draw Ping',
//     transactionID: '13123456',
//     count: 3,
//     orderPlaced: true,
//     orderShipped: true,
//     orderDelivered: true,
//     trackingNumber: '1000     '
//   },
//   {
//     colorC: 'Red',
//     sizeC: '15',
//     url: 'https://google.com',

//     title: 'Draw Ping',
//     transactionID: '1123123456',
//     count: 3
//   },
//   {
//     colorC: 'Red',
//     sizeC: '15',
//     url: 'https://google.com',

//     title: 'Draw Ping',
//     transactionID: '121231233456',
//     count: 3
//   },
//   {
//     colorC: 'Red',
//     sizeC: '15',
//     url: 'https://google.com',
//     title: 'Draw Ping',
//     transactionID: '1000',
//     count: 3
//   }
// ];
// orders.ordersDelivered = true;

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    margin: '5% 0',
    overflowX: 'auto'
  },
  table: {
    minWidth: 650
  },
  tabLink: {
    cursor: 'pointer',
    textDecoration: 'underline',
    color: 'blue'
  }
}));

let handleClick = (url, trackingNumber) => {
  window.open(url, '_blank');
};
const OrdersList = props => {
  const orders = props.order;
  const productConsumer = useContext(ProductContext);

  let notify = error => toast.error(` ✋ Please Choose A ${error}`);
  let info = () => toast.info(` ✔️ Info Copied Ready to Submit`);
  let ordersDelivered = (symbol, message) =>
    toast.info(` ${symbol} ${message}`);
  const [orderBoxes, setBoxes] = useState({
    orderBoxesA: true,
    orderBoxesB: true,
    orderBoxesF: true
  });
  const [shippedBoxes, setShipped] = useState({
    shippedBoxesA: true,
    shippedBoxesB: true,
    shippedBoxesF: true
  });
  //!Fix State for error
  const [deliveredBoxes, setDelivered] = useState({
    deliveredBoxesA: true,
    deliveredBoxesB: true,
    deliveredBoxesF: true
  });
  const [loading, setLoading] = useState(true);
  useEffect(() => {
   
     
    if (productConsumer.modalLogin === false) {
      (async () => {
        await domLoaded;
        setTimeout(() => {
          setLoading(false);
        }, 300);
      })();
    }
    // eslint-disable-next-line
  }, [productConsumer.modalLogin]);

  const [input, setInput] = useState('');
  // eslint-disable-next-line
  const [setContact, setTheContact] = useState('');
  const [zipInput, setZip] = useState('');
  const [addressInput, setAddress] = useState('');
  const [hidden, setHidden] = useState(true);

  const [inputError, setError] = useState(false);
  // eslint-disable-next-line to the line before
  const [zipError, setZipError] = useState(false);
  // eslint-disable-next-line to the line before
  const [countryError, setcountryError] = useState(false);
  const [addressError, setaddressError] = useState(false);

  const [country, setCountry] = useState('Dooms Day');

  const [success, setsuccess] = useState(false);

  const [captchasuccess, setcaptchasuccess] = useState(
    !productConsumer.productionEnv
  );

  const handlePlaceChange = id => event => {
    setBoxes({ ...orderBoxes, [id]: event.target.checked });
  };
  const handleShippedChange = (id, order) => event => {
    if (order.trackingNumber && order.trackingNumber.length > 10) {
      setShipped({ ...shippedBoxes, [id]: event.target.checked });
      console.log(id);
    } else {
      order.trackingNumber = window.prompt(
        'Please Enter A Valid Tracking Number Or This Will not be marked as Shipped (10Char)'
      );
    }
  };

  const handleDeliveredChange = id => event => {
    setDelivered({ ...deliveredBoxes, [id]: event.target.checked });
  };
  const selectCountry = val => {
    setCountry(val);
  };
  const captchaExpired = () => {
    setcaptchasuccess(false);
  };
  const captchaSuccess = () => {
    setcaptchasuccess(true);
  };
  const onSuccess = orders => {
    let id = orders.orderID;

    let addressObj = orders.adressInfo;
    console.log(orders);
    setsuccess(true);
    productConsumer.updateOrder(orders, id);
    console.log(addressObj);
  };

  const onSubmit = () => {
    let id = 0;

    //@ Add OrderPlacement
    orders.map((order, i) => {
      id = Number(order.transactionID);
      let firstItemId = Number(id);
      order.orderPlaced = orderBoxes[firstItemId];
      order.orderShipped = shippedBoxes[firstItemId];
      order.orderDelivered = deliveredBoxes[firstItemId];
      if (!order.orderDelivered) {
        orders.orderDelivered = false;
      } else {
        orders.orderDelivered = true;
      }

      return orders;
    });
    var text = input;
    var zipText = zipInput;
    var integer = parseInt(text, 10);
    let zipInteger = parseInt(zipText, 10);

    if (zipInteger.toString().length !== 5) {
      setZipError(true);
      notify('Zip Code (Five numbers)');
    }
    if (addressInput.length < 15) {
      setaddressError(true);
      notify('Address (Atleast 15 Charactest)');
    }

    if (country === 'Dooms Day') {
      setcountryError(true);
      notify('Country');
    }
    if (!input.includes('@') && integer.toString().length < 10) {
      notify('Contact (Email or Phone Number)');
      setError(true);
    }
    if (
      (input.includes('@') || integer.toString().length >= (10 || 15)) &&
      (zipInteger.toString().length === 5 &&
        addressInput.length > 15 &&
        country !== 'Dooms Day')
    ) {
      orders.contactInformation = input;
      orders.adressInfo = {
        zipCode: zipInteger,
        country: country,
        address: addressInput
      };
      onSuccess(orders, integer, input);
    } else {
    }
  };
  useEffect(() => {
    if (orders.contactInformation) {
      setTheContact(orders.contactInformation);
    }
    let id = 0;
    orders.map((order, i) => {
      id = Number(order.transactionID);

      if (order.orderPlaced) {
        orderBoxes[id] = true;
      } else {
        orderBoxes[id] = false;
      }
      if (order.orderShipped) {
        shippedBoxes[id] = true;
      } else {
        shippedBoxes[id] = false;
      }
      if (order.orderDelivered) {
        deliveredBoxes[id] = true;
      } else {
        deliveredBoxes[id] = false;
      }

      return orders;
    });
    let ratingArray = [];

    let avg = 0;

    orders.map((order, i) => {
      ratingArray.push(Number(order.transactionID));
      let sum = ratingArray.reduce(
        (previous, current) => (current += previous)
      );
      avg = Math.ceil(sum / ratingArray.length);
      orders.orderID = avg;
      return order;
    });

    orders.orderID = avg;
    // eslint-disable-next-line
  }, [hidden]);
  // zipCode: zipInteger,
  //     country: country,
  //     address: addressInput
  let copyCurrentInformation = () => {
    let addressObj2 = orders.adressInfo;
    let contactInfo = orders.contactInformation;
    console.log(contactInfo, 'orders.addressInfo');
    if (addressObj2) {
      setTimeout(() => {
        setCountry(orders.adressInfo.country);
        setInput(contactInfo);
        setZip(orders.adressInfo.zipCode);
        setAddress(orders.adressInfo.address);
      }, 600);
      info();
    }
  };

  // useEffect(
  //   () => () => {
  //     console.clear();
  //     console.log('unmount');
  //   },
  //   []
  // );

  let markEntireOrderDelivered = bool => {
    orders.ordersDelivered = bool;
    console.log(orders);
    orders.ordersDelivered
      ? ordersDelivered('✔️', 'Orders Marked As Completed')
      : ordersDelivered('❌', 'Orders Marked As Incompleted');
  };
  const classes = useStyles();

  if (!loading) {
    return (
      <div style={{ visibility: productConsumer.modalLogin ? 'hidden' : '' }}>
        <ExpansionPanel
          style={{
            background: orders && !orders.ordersDelivered ? 'tomato' : '#5994f6'
          }}
        >
          {/* @Work */}

          <ExpansionPanelSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography className="text-white">{orders.orderID}</Typography>
          </ExpansionPanelSummary>

          <ExpansionPanelDetails>
            <Paper className={classes.root}>
              <h1 className="text-center">
                {orders && orders.ordersDelivered ? (
                  <strike>{` Order#  ${orders.orderID} (Delivered)`}</strike>
                ) : (
                  `Order# ${orders.orderID}`
                )}
              </h1>
              <h3 className="text-center">{orders.contactInformation}</h3>
              <ul className="text-center " style={{ listStyle: 'none' }}>
                <li>
                  {orders && orders.adressInfo && orders.adressInfo.zipCode}
                </li>
                <li>
                  {orders && orders.adressInfo && orders.adressInfo.country}
                </li>
                <li>
                  {orders && orders.adressInfo && orders.adressInfo.address}
                </li>
              </ul>
              <Table  className={classes.table}>
                <TableHead>
                  <TableRow>
                    <TableCell align="center">Name</TableCell>
                    <TableCell align="center">Color</TableCell>
                    <TableCell align="center">Size</TableCell>
                    <TableCell align="center">Number Of Items</TableCell>
                    <TableCell align="center">TransactionID</TableCell>
                    <TableCell align="center">URL</TableCell>

                    <TableCell align="center">Item Ordered?</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {orders.map(order => (
                    <TableRow key={order.transactionID}>
                      <TableCell component="th" scope="row">
                        {order.title}
                      </TableCell>
                      <TableCell align="center">
                        {order.colorC && order.colorC}
                      </TableCell>
                      <TableCell align="center">
                        {order.colorC && order.sizeC}
                      </TableCell>
                      <TableCell align="center">{order.count}</TableCell>
                      <TableCell align="center">
                        {order.transactionID}
                      </TableCell>
                      <TableCell align="center">
                        <i
                          onClick={() => {
                            handleClick(order.url);
                          }}
                          className={classes.tabLink}
                        >
                          Place Order
                        </i>
                        <br />
                      </TableCell>

                      <TableCell
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center'
                        }}
                      >
                        Placed?
                        <Checkbox
                          color="primary"
                          checked={
                            !order.orderPlaced
                              ? orderBoxes[order.transactionID]
                              : true
                          }
                          disabled={order.orderPlaced ? true : false}
                          onChange={handlePlaceChange(order.transactionID)}
                          value={'checkedA'}
                          inputProps={{
                            'aria-label': 'primary checkbox'
                          }}
                        />
                        Shipped?
                        <Checkbox
                          color="primary"
                          checked={
                            !order.orderShipped
                              ? shippedBoxes[order.transactionID]
                              : true
                          }
                          disabled={order.orderShipped ? true : false}
                          onChange={handleShippedChange(
                            order.transactionID,
                            order
                          )}
                          onClick={() =>
                            (order.trackingNumber = window.prompt(
                              'Please Enter The Tracking Number'
                            ))
                          }
                          value={'checkedA'}
                          inputProps={{
                            'aria-label': 'primary checkbox'
                          }}
                        />
                        Delivered?
                        <Checkbox
                          color="primary"
                          checked={
                            !order.orderPlaced
                              ? deliveredBoxes.transactionID
                              : true
                          }
                          disabled={order.orderDelivered ? true : false}
                          onChange={handleDeliveredChange(order.transactionID)}
                          value={'checkedA'}
                          inputProps={{
                            'aria-label': 'primary checkbox'
                          }}
                        />
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Paper>
          </ExpansionPanelDetails>
          <div className="text-center">
            <Button
              variant="contained"
              color="default"
              onClick={() => setHidden(hidden ? false : true)}
            >
              {' '}
              <span style={{ color: 'tomato' }}> Show Save</span>
            </Button>
          </div>
        </ExpansionPanel>

        <Fade up>
          <div
            style={{
              display: hidden ? 'none' : '',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            <form>
              <div
                style={{ padding: '10px !important' }}
                className="text-center"
                id="countrySelector"
              >
                <div
                  style={{ padding: '10px !important' }}
                  className="text-center"
                  id="countrySelector"
                >
                  <div
                    style={{ padding: '10px !important' }}
                    className="text-center"
                    id="countrySelector"
                  >
                    <TextField
                      id="outlined-dense"
                      label={
                        !zipError
                          ? '5 Digit Zip Code'
                          : 'Please Enter a Valid Zip Code'
                      }
                      placeholder={
                        !zipError
                          ? '5 Digit Zip Code'
                          : 'Please Enter a Valid Zip Code'
                      }
                      onChange={e => setZip(e.target.value)}
                      error={zipError ? true : false}
                      margin="dense"
                      variant="outlined"
                    />
                  </div>
                  <TextField
                    id="outlined-dense"
                    label={
                      !inputError
                        ? 'Contact Information'
                        : 'Please Enter a Valid Contact'
                    }
                    defaultValue={
                      orders.contactInformation ? orders.contactInformation : ''
                    }
                    placeholder={
                      !inputError
                        ? 'Email or Phone Number'
                        : 'Please Enter a Valid Contact'
                    }
                    onChange={e => setInput(e.target.value)}
                    error={inputError ? true : false}
                    margin="dense"
                    variant="outlined"
                  />
                </div>
                <div
                  style={{ padding: '10px !important' }}
                  className="text-center"
                  id="countrySelector"
                >
                  <TextField
                    id="outlined-dense"
                    label={
                      !addressError
                        ? 'Address Information'
                        : 'Please Enter a Valid Address'
                    }
                    placeholder={
                      !addressError
                        ? 'Street Address and State'
                        : 'Please Enter a Valid Address'
                    }
                    onChange={e => setAddress(e.target.value)}
                    error={addressError ? true : false}
                    margin="dense"
                    variant="outlined"
                  />
                </div>
                <div
                  style={{ padding: '10px !important' }}
                  className="text-center"
                  id="countrySelector"
                >
                  {/* {countryError && ( */}
                  <span style={{ color: 'red' }}>
                    {countryError} {zipError}
                  </span>
                  {/* )} */}
                  <CountryDropdown
                    style={{ width: isMobile ? '70%' : '' }}
                    value={country}
                    onChange={val => selectCountry(val)}
                  />
                </div>
              </div>
              <Recaptcha expired={captchaExpired} success={captchaSuccess} />
              <div id="justify-box-center">
                <Button
                  disabled={success && true}
                  style={{ display: captchasuccess ? '' : 'none' }}
                  className={captchasuccess ? 'scale-in-center' : ''}
                  onClick={() => onSubmit()}
                  variant="contained"
                  color="primary"
                >
                  {!success ? 'Save' : 'Saved'}{' '}
                  {!success ? (
                    <SendIcon></SendIcon>
                  ) : (
                    <CheckCircleOutlineIcon></CheckCircleOutlineIcon>
                  )}
                </Button>
                <br />
              </div>
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center'
                }}
              >
                {orders.contactInformation && (
                  <span
                    onClick={() => copyCurrentInformation()}
                    style={{ color: '#e56431', cursor: 'pointer' }}
                    className="text-center"
                  >
                    Copy Customers Info to Form
                  </span>
                )}
              </div>
              <br />
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center'
                }}
              >
                {!orders.ordersDelivered && (
                  <Button
                    onClick={() => markEntireOrderDelivered(true)}
                    style={{ color: '#e56431', cursor: 'pointer' }}
                    className="text-center"
                    variant="contained"
                  >
                    {!orders.ordersDelivered
                      ? 'Mark Entire Order As Delivered'
                      : 'Unmark As Delivered'}
                  </Button>
                )}
                {orders.ordersDelivered && (
                  <Button
                    onClick={() => markEntireOrderDelivered(false)}
                    style={{ color: '#e56431', cursor: 'pointer' }}
                    className="text-center"
                    variant="contained"
                  >
                    Unmark As Delivered
                  </Button>
                )}
              </div>
            </form>
          </div>
        </Fade>
      </div>
    );
  } else if(loading){
 return null;
  }
};

//! Client Orders

const OrdersListClient = props => {
  const classes = useStyles();

  // eslint-disable-next-line
  const [searched, setSearched] = useState(false);
  const productConsumer = useContext(ProductContext);
  let { singleOrderClient } = productConsumer;

  useEffect(() => {
    var parts = props.location.pathname.split('/');
    var lastSegment = parts.pop() || parts.pop();
    console.log(lastSegment, 'LastSegment');
    productConsumer.getOrder(lastSegment);
  }, [productConsumer, props.location.pathname]);
  const orders = singleOrderClient;

  return (
    <div>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}
      ></div>
      <Paper className={classes.root}>
        <h1 className="text-center">
          {orders.ordersDelivered ? (
            <strike>{` Order#  ${orders.orderID} (Delivered)`}</strike>
          ) : (
            `Order# ${orders.orderID}`
          )}
        </h1>
        <h3 className="text-center">{orders.contactInformation}</h3>
        <ul className="text-center " style={{ listStyle: 'none' }}>
          <li>{orders.adressInfo && orders.adressInfo.zipCode}</li>
          <li>{orders.adressInfo && orders.adressInfo.country}</li>
          <li>{orders.adressInfo && orders.adressInfo.address}</li>
        </ul>
        <Table  className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell align="center">Name</TableCell>
              <TableCell align="center">Color</TableCell>
              <TableCell align="center">Size</TableCell>
              <TableCell align="center">Number Of Items</TableCell>
              <TableCell align="center">TransactionID</TableCell>
              <TableCell align="center">Track Package</TableCell>

              <TableCell align="center">Item Ordered?</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {orders.map(order => (
              <TableRow key={order.transactionID}>
                <TableCell component="th" scope="row">
                  {order.title}
                </TableCell>
                <TableCell align="center">
                  {order.colorC && order.colorC}
                </TableCell>
                <TableCell align="center">
                  {order.colorC && order.sizeC}
                </TableCell>
                <TableCell align="center">{order.count}</TableCell>
                <TableCell align="center">{order.transactionID}</TableCell>
                {order.trackingNumber ? (
                  <TableCell align="center">
                    <i
                      onClick={() => {
                        handleClick(
                          `https://www.packagetrackr.com/track/${order.trackingNumber.trim()}`,
                          order.trackingNumber.trim()
                        );
                      }}
                      className={classes.tabLink}
                    >
                      Track Order
                    </i>
                    <br />
                    <i id="trackingNumber">{order.trackingNumber.trim()}</i>
                    <br />
                  </TableCell>
                ) : (
                  <TableCell align="center">
                    <span>
                      {' '}
                      <i>Not Shipped</i>
                    </span>
                    <br />
                  </TableCell>
                )}

                <TableCell
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                >
                  <OrderStepper product={order} />
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Paper>

      <Fade up>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        ></div>
      </Fade>
    </div>
  );
};

export { OrdersList, OrdersListClient };

export const OrdersListExportModule = withRouter(OrdersList);
export const OrdersListClientModule = withRouter(OrdersListClient);