text: import React, { useState, useEffect } from "react";
  // @material-ui/core components
  import { makeStyles } from "@material-ui/core/styles";
  // core components
  import Card from "../../components/Card/Card.js";
  import CardHeader from "../../components/Card/CardHeader.js";
  import CardBody from "../../components/Card/CardBody.js";
  import { useSelector, useDispatch } from "react-redux";
  import { getTableStats } from "../../actions/common";
  import Table from "../../common/tableRendrer";
  import { APP_ERROR_MSGS } from "../../common/constants";
  import { useAlert } from "react-alert";
  import { UPDATE_LOADING } from "../../actions/types";
  import { Link } from "react-router-dom";
  import {
    convertDateFormate,
    ConvertToCurrency,
    ExportToCVS,
  } from "../../common/commonMethods";
  import { useHistory } from "react-router-dom";
  import CustomeCSVExportbtn from "../../common/CustomeCSVExportbtn";
  import moment from "moment";
  
  const styles = {
    cardCategoryWhite: {
      "&,& a,& a:hover,& a:focus": {
        color: "rgba(255,255,255,.62)",
        margin: "0",
        fontSize: "14px",
        marginTop: "0",
        marginBottom: "0",
      },
      "& a,& a:hover,& a:focus": {
        color: "#FFFFFF",
      },
    },
    cardTitleWhite: {
      color: "#FFFFFF",
      marginTop: "0px",
      minHeight: "auto",
      fontWeight: "300",
      fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
      marginBottom: "3px",
      textDecoration: "none",
      "& small": {
        color: "#777",
        fontSize: "65%",
        fontWeight: "400",
        lineHeight: "1",
      },
    },
  };
  const useStyles = makeStyles(styles);
  
  export default function CancelRequestsList({
    startDate,
    endDate,
    selectedFilterVal,
    btnClickChange,
  }) {
    // Hooks
    const history = useHistory();
    const alert = useAlert();
    const dispatch = useDispatch();
    const { USD_rate } = useSelector((state) => state.auth.appSettings);
    const classes = useStyles();
    const sizePerPageList = [
      {
        text: "20",
        value: 20,
      },
      {
        text: "30",
        value: 30,
      },
      {
        text: "50",
        value: 50,
      },
    ];
  
    const exportColumns = [
      "Booking Id",
      "Booking Cost in PKR",
      "Booking Cost in USD",
      "Booking Date",
      "Created On",
      "Discount",
      "Funncar",
      "Notes",
      "On Tour Booking",
      "Payment Mode",
      "Service",
      "Status",
      "Booking Person",
      "Booking By",
      "Accepted",
      "Public Video",
      "Rating Given",
      "Marked Done",
      "Video For",
      "Video Message",
      "Video Message Delivery Date",
      "Video My Name",
      "Video Dedicated To",
    ];
  
    // state
    const [tableProps, setTableProps] = useState({
      data: [],
      page: 1,
      sizePerPage: 20,
      totalSize: 0,
      loading: false,
      sortName: "",
      sortOrder: "",
    });
  
    // variables and functions
    const rowEvents = {
      onDoubleClick: (e, row, rowIndex) => {
        history.push(`/admin/booking/${row.id}`);
      },
    };
    const CellMenu = (cell, row) => {
      return (
        <>
          {/* <Link to={`/admin/booking/${row.id}`} target="_blank"> */}
          <button
            onClick={() => handleListBtnClick(row.id)}
            data-toggle="tooltip"
            title="View"
            className="pd-setting-ed"
          >
            <i className="fa fa-eye" aria-hidden="true"></i>
          </button>
          {/* </Link> */}
        </>
      );
    };
    const columns = [
      {
        dataField: "bookingId",
        text: "Id",
        sort: true,
        headerStyle: (colum, colIndex) => {
          return { width: "70px" };
        },
      },
      {
        dataField: "user.fullName",
        text: "Fan",
        formatter: (cell, row) => {
          return (
            <>
              {row.bookingBy === "user"
                ? row.user?.fullName
                : row.user?.professionalName}
            </>
          );
        },
        csvFormatter: (cell, row, rowIndex) =>
          row.bookingBy === "user"
            ? row.user?.fullName
            : row.user?.professionalName,
      },
      {
        dataField: "funncar.professionalName",
        text: "Performer",
        headerStyle: (colum, colIndex) => {
          return { width: "80px" };
        },
      },
      {
        dataField: "service.name",
        text: "Service",
        headerStyle: (colum, colIndex) => {
          return { width: "80px" };
        },
      },
      {
        dataField: "totalCost",
        text: "Rs",
        sort: true,
        headerStyle: (colum, colIndex) => {
          return { width: "80px" };
        },
      },
      {
        dataField: "view",
        text: "View",
        formatter: (cell, row) => {
          return CellMenu(cell, row);
        },
        csvExport: false,
      },
    ];
    const handleListBtnClick = (id) => {
      let state = {
        redirectToURL: `/admin/dashboard`,
        data: { startDate, endDate, selectedFilterVal },
        search: "",
      };
      let pathName = `/admin/booking/${id}`;
      history.push({
        pathname: pathName,
        state: { backRedirection: state },
      });
    };
  
    const handleTableChange = (type, newState) => {
      if (type == "sort") {
        let sortOrder =
          newState.sortField == tableProps.sortName
            ? tableProps.sortOrder == "" || tableProps.sortOrder == "asc"
              ? "desc"
              : "asc"
            : "desc";
  
        setTableProps({
          ...tableProps,
          page: 1,
          sortName: newState.sortField,
          sortOrder: sortOrder,
        });
      } else if (type == "pagination") {
        setTableProps({
          ...tableProps,
          page: newState.page,
          // sizePerPage: newState.sizePerPage,
        });
      }
    };
    const getParamString = (page = 1, exportToCSV = "") => {
      let paramString = `type=${selectedFilterVal}&key=cancelBookingTable&page=${page}`;
      if (selectedFilterVal == "custom") {
        paramString =
          paramString +
          `&startDate=${convertDateFormate(
            startDate
          )}&endDate=${convertDateFormate(endDate)}`;
      }
      if (tableProps.sortName != "") {
        let order =
          tableProps.sortOrder == "desc"
            ? `-${tableProps.sortName}`
            : tableProps.sortName;
        paramString = `${paramString}&sort=${order}`;
      }
      if (exportToCSV) paramString = `${paramString}&exportToCSV=${exportToCSV}`;
      return paramString;
    };
    const populateTable = (page) => {
      setTableProps({ ...tableProps, loading: true, data: [] });
      getTableStats(getParamString(page))
        .then((result) => {
          if (result.data.status === true) {
            setTableProps({
              ...tableProps,
              data: result.data.data ? result.data.data.tableResult : [],
              totalSize: result.data.data ? result.data.totalCount : 0,
              loading: false,
              page: page,
            });
          } else {
            setTableProps({ ...tableProps, loading: false });
            alert.error(
              result.data.message
                ? result.data.message
                : APP_ERROR_MSGS.StandardErrorMsg
            );
          }
        })
        .catch((error) => {
          setTableProps({ ...tableProps, loading: false });
          alert.error(
            error?.response?.data?.error
              ? error?.response?.data?.error
              : APP_ERROR_MSGS.StandardErrorMsg
          );
        });
    };
    useEffect(() => {
      populateTable(tableProps.page);
    }, [tableProps.page]); // , tableProps.sizePerPage
    useEffect(() => {
      populateTable(1);
    }, [btnClickChange, tableProps.sortName, tableProps.sortOrder]);
  
    const getExportListRows = (list) => {
      let data = [];
      for (let i in list) {
        let TempArray = [
          list[i].bookingId.toString(),
          (list[i].currency === "PKR"
            ? list[i].totalCost
            : ConvertToCurrency(list[i].totalCost, "PKR", USD_rate)
          ).toString(),
          (list[i].currency === "USD"
            ? list[i].totalCost
            : ConvertToCurrency(list[i].totalCost, "USD", USD_rate)
          ).toString(),
          moment(list[i].bookingStartTime).format("YYYY-MM-DD HH:mm"),
          moment(list[i].createdAt).format("YYYY-MM-DD HH:mm"),
          list[i].discount.toString(),
          list[i].funncar?.professionalName,
          list[i].notes.replace(/,/g, ""),
          list[i].onTourBooking ? "Yes" : "No",
          list[i].paymentMode ? list[i].paymentMode : "",
          list[i].service?.key.includes("Video")
            ? list[i].service?.name
            : list[i].service?.name + " - " + list[i].eventType?.name,
          list[i].status,
          list[i].bookingBy === "user"
            ? list[i].user?.fullName
            : list[i].user?.professionalName,
          list[i].bookingBy,
          list[i].isAcceptedByFunncar ? "Yes" : "No",
          list[i].isPublicVideo ? "Yes" : "No",
          list[i].isRatingGiven ? "Yes" : "No",
          list[i].markDone ? "Yes" : "No",
          list[i].videoFor ? list[i].videoFor : "",
          list[i].videoMessage ? list[i].videoMessage.replace(/,/g, "") : "",
          moment(list[i].videoMessageDeliveryDateTime).format("YYYY-MM-DD HH:mm"),
          list[i].videoMyName ? list[i].videoMyName : "",
          list[i].videoTheirName ? list[i].videoTheirName : "",
        ];
        data.push(...TempArray);
      }
      return data;
    };
    const exportList = () => {
      dispatch({ type: UPDATE_LOADING, payload: true });
      getTableStats(getParamString(1, "true"))
        .then((result) => {
          if (result.data.status === true) {
            dispatch({ type: UPDATE_LOADING, payload: false });
            ExportToCVS(
              exportColumns,
              getExportListRows(
                result.data.data ? result.data.data.tableResult : []
              ),
              "Cancelled Bookings"
            );
          } else {
            dispatch({ type: UPDATE_LOADING, payload: false });
            alert.error(
              result.data.message
                ? result.data.message
                : APP_ERROR_MSGS.StandardErrorMsg
            );
          }
        })
        .catch((error) => {
          dispatch({ type: UPDATE_LOADING, payload: false });
          alert.error(
            error?.response?.data?.error
              ? error?.response?.data?.error
              : APP_ERROR_MSGS.StandardErrorMsg
          );
        });
    };
  
    return (
      <>
        <Card className="card-height-fixed">
          <CardHeader color="primary">
            <h4 className={classes.cardTitleWhite}>Cancelled Bookings</h4>
          </CardHeader>
          <CardBody>
            <div className="Dashboard-Table">
              <CustomeCSVExportbtn onClick={exportList} />
              <Table
                {...tableProps}
                onTableChange={handleTableChange}
                columns={columns}
                isTotalShow={false}
                sizePerPageList={sizePerPageList}
                rowEvents={rowEvents}
                exportBtn={false}
              />
            </div>
          </CardBody>
        </Card>
      </>
    );
  }
  