/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import PageHeader from "../../../components/_App/Breadcrumb";
import Seo from "../../../components/_App/Seo";
import Link from "next/link";
import {
  Card,
  Col,
  FormGroup,
  Form,
  Dropdown,
  Row,
  Collapse,
} from "react-bootstrap";
// import DataTable from "react-data-table-component";
const DataTable = dynamic(() => import("react-data-table-component"), {
  ssr: false,
});
// @ts-ignore
const DataTableExtensions = dynamic(
  // @ts-ignore
  () => import("react-data-table-component-extensions"),
  { ssr: false }
);
import "react-data-table-component-extensions/dist/index.css";
import Loader from "../../../components/Loader/Loader";
import { useRouter } from "next/router";
import axios from "axios";
import Swal from "sweetalert2";
import { toast } from "react-toastify";
import constants from "../../../components/constants/constants";
import { TableColumn } from "react-data-table-component";

const Orders = () => {
  const [addModal, setAddModal] = useState(false);
  const [editIdentity, setEditIdentity] = useState("");

  const [search, setSearch] = useState("");
  const [pass, setPass] = useState("");
  let [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [filteredUsers, setFilteredUsers] = useState([]);
  const [total, setTotal] = useState(0);
  const [des, setDes] = useState(0);
  const [pending, setPending] = React.useState(true);
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const [isFilterOpen, setIsFilterOpen] = useState(false);
  const [countPerPage, setCountPerPage] = useState(15);
  const obj = {
    approval_status: "",
    active_status: "",
  };
  const [filter, setFilter] = useState(obj);
  const paginationComponentOptions = {
    selectAllRowsItem: true,
    selectAllRowsItemText: "ALL",
  };
  const columns = [
    
    {
      name: "Plan Name",
      selector: (row: { creator: { name: any; }; }) => [row?.creator?.name],
      sortable: true,
      width: "10%",
      cell: (row: { creator: { user_role: { name: string; }; id: any; name: string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined; }; }) => (
        <div>
        </div>
      ),
    },
    {
      name: "Exam test",
      width: "15%",
      selector: (row: { rate_overall_experience: any; }) => [row.rate_overall_experience],
      cell: (row: { rate_overall_experience: string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined; }) => <div>{row.rate_overall_experience}/5</div>,
      sortable: false,
    },
    {
      name: "Exam Analytics",
      width: "25%",
      selector: (row: { rate_creation_experience: any; }) => [row.rate_creation_experience],
      sortable: true,
      cell: (row: { rate_creation_experience: string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined; }) => (
        <div>
          <span className={`text-success small mb-0 mt-1 tx-12`}>
            {row.rate_creation_experience}
          </span>
        </div>
      ),
    },
    {
      name: "Attempts",
      width: "10%",
      selector: (row: { rate_profile_page: any; }) => [row.rate_profile_page],
      sortable: true,
      cell: (row: { rate_profile_page: string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined; }) => <div>{row.rate_profile_page}</div>,
    },
    {
      name: "Amount",
      width: "15%",
      selector: (row: { recommend_foc: any; }) => [row.recommend_foc],
      sortable: true,
      cell: (row: { recommend_foc: string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined; }) => <div>{row.recommend_foc}</div>,
    },
    {
      name: "Created On",
      width: "15%",
      selector: (row: { description: any; }) => [row.description],
      sortable: true,
      cell: (row: { description: string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined; }) => <div>{row.description}</div>,
    },
    {
      name: "Action",
      selector: (row: { serial: any; }) => [row.serial],
      sortable: true,
      width: "10%",
      cell: (row: { serial: string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined; }) => <div className="font-weight-bold">{row.serial}</div>,
    },
  ];
  const changeApproveStatus = async (ev: { preventDefault: () => void; }, sts: string | Blob, id: string | Blob) => {
    // return 1
    ev.preventDefault();
    Swal.fire({
      title: `Are you sure you want to approve this identity?`,
      showCancelButton: true,
      allowOutsideClick: false,
      confirmButtonText: "Confirm",
      icon: "warning",
    }).then(async (result) => {
      if (result.isConfirmed) {
        const body = new FormData();
        body.append("id", id);
        body.append("approve", sts);
        const url = `${process.env.NEXT_PUBLIC_API_ENDPOINT}admin/masters/identity/approve`;
        const token = localStorage.getItem("token");
        setIsLoading(true);
        try {
          const response = await axios.post(url, body, {
            headers: {
              Authorization: "Bearer " + token,
            },
          });
          if (response.status === 200) {
            toast.success(response.data.message, {
              position: "top-right",
              autoClose: 3000,
            });
            setDes((prev: number) => prev + 1);
          } else if (response.status === 401) {
            localStorage.removeItem("token");
            localStorage.removeItem("userData");
            router.push("/");
          } else {
            toast.warning("An error occurred while changing the status.", {
              position: "top-right",
              autoClose: 3000,
            });
          }
        } catch (error: any) {
          setIsLoading(false);
          if (error.response.status === 401) {
            localStorage.removeItem("token");
            localStorage.removeItem("userData");
            router.push("/");
          } else if (error.response.status === 404) {
            toast.warning("Resource not found", {
              position: "top-right",
              autoClose: 3000,
            });
          } else if (error.response.status === 500) {
            toast.warning("Internal server error", {
              position: "top-right",
              autoClose: 3000,
            });
          } else {
            toast.warning("An error occurred", {
              position: "top-right",
              autoClose: 3000,
            });
          }
        }
      }
    });
  };
  const fetchListings = async (type = 0) => {
    setPending(true);
    const address = `${process.env.NEXT_PUBLIC_API_ENDPOINT}admin/feedList`;
    const token = localStorage.getItem("token");
    try {
      let config = {
        method: "get",
        url: `${address}?page=${page}&per_page=${countPerPage}&delay=1&search=${search}`,
        headers: { Authorization: "Bearer " + token },
      };
      if (type == 1) {
        config = {
          method: "get",
          url: `${address}?page=${page}&per_page=${countPerPage}&delay=1&search=${search}&active=${filter.active_status}&approve=${filter.approval_status}`,
          headers: { Authorization: "Bearer " + token },
        };
      }
      const response = await axios(config);
      setPending(false);
      if (response.status === 200) {
        if (response.data.status) {
          var datas = response.data.data.articles;
          if (datas.data.length > 0) {
            setTotal(datas.meta.total);
            datas.data.forEach((da: any, index: number) => {
              if (page === 1) {
                da.serial = index + 1;
              } else {
                da.serial = (page - 1) * countPerPage + (index + 1);
              }
            });
          }
          setData(datas.data);
          setFilteredUsers(datas.data);
          // setPending(false);
        } else {
          toast.warning(response.data.message, {
            position: "top-right",
            autoClose: 3000,
          });
        }
      } else if (response.status === 401) {
        localStorage.removeItem("token");
        localStorage.removeItem("userData");
        router.push("/");
      }
    } catch (error: any) {
      console.log(error);
      if (error.response.status === 401) {
        localStorage.removeItem("token");
        localStorage.removeItem("userData");
        router.push("/");
      } else if (error.response.status === 404) {
        toast.warning("Resource not found", {
          position: "top-right",
          autoClose: 3000,
        });
      } else if (error.response.status === 500) {
        toast.warning("Internal server error", {
          position: "top-right",
          autoClose: 3000,
        });
      } else {
        toast.warning("An error occurred", {
          position: "top-right",
          autoClose: 3000,
        });
      }
    }
  };
  useEffect(() => {
    fetchListings();
  }, [page, search, countPerPage, des]);
  const tableData = {
    columns,
    data,
  };
  const handleSearch = (e: any) => {
    const searchText = e.target.value;
    setSearch(searchText);
  };

  const openModal = () => {
    setAddModal(true);
  };

  return (
    <>
      <style jsx>
        {`
          .filter-text {
            border: 1px solid #e8e8f7 !important;
            border-bottom: 1px solid #e8e8f7 !important;
            outline: none !important;
            padding: 0.375rem 0.75rem !important;
            margin-left: -11px !important;
            background-color: transparent !important;
            border-radius: 7px;
          }
          .data-table-extensions {
            display: none !important;
          }
          .custom-card .header {
            width: auto !important;
          }
          .filter-table {
            margin-left: 0px !important;
          }
          .filter-table {
            border: 0 !important;
          }
          .table-accordian-filter.accordion {
            margin-right: -10px;
            margin-left: 15px;
          }
        `}
      </style>
      <Seo title="Feedback Listing" />
      <PageHeader title="Pricing" item="Price" active_item="Listing" />
      <div>
        {/* <!-- Row --> */}
        <Row className="row-sm">
          <Col md={12} lg={12}>
            <Card className=" custom-card">
              <Card.Body>
                <div className="table-responsive">
                  <div className="d-flex">
                    <select className=" mb-4 selectpage border me-1">
                      <option value={10}>Show 10</option>
                      <option value={25}>Show 25</option>
                      <option value={50}>Show 50</option>
                    </select>
                    <span className="d-flex ms-auto"><input className="form-control mb-4" placeholder="Search..." /></span>
                  </div>
                  <table role="table" className="table table-striped table-hover mb-0 table-bordered">
                    <thead>
                      <tr role="row">
                        <th colSpan={1} role="columnheader" title="Toggle SortBy" style={{cursor: 'pointer'}}><span
                            className="tabletitle">Plan Name</span><span /></th>
                        <th colSpan={1} role="columnheader" title="Toggle SortBy" style={{cursor: 'pointer'}}><span
                            className="tabletitle">Exam Tests</span><span /></th>
                        <th colSpan={1} role="columnheader" title="Toggle SortBy" style={{cursor: 'pointer'}}><span
                            className="tabletitle">Exam Analytics</span><span /></th>
                        <th colSpan={1} role="columnheader" title="Toggle SortBy" style={{cursor: 'pointer'}}><span
                            className="tabletitle">Attempts</span><span /></th>
                        <th colSpan={1} role="columnheader" title="Toggle SortBy" style={{cursor: 'pointer'}}><span
                            className="tabletitle">Amount</span><span /></th>
                        <th className="text-center" colSpan={1} role="columnheader" title="Toggle SortBy" style={{cursor: 'pointer'}}><span
                            className="tabletitle">Action</span><span /></th>
                      </tr>
                    </thead>
                    <tbody role="rowgroup">
                      <tr role="row">
                        <td className="borderrigth" role="cell">Basic plan</td>
                        <td className="borderrigth" role="cell">Limited Tests</td>
                        <td className="borderrigth" role="cell">Basic Analytics</td>
                        <td className="borderrigth" role="cell">10</td>
                        <td className="borderrigth" role="cell">₹150.00/M</td>
                        <td className="borderrigth" role="cell">
                          <div className="dropdown text-center">
                            <a href="#" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                              <span className="ti-more-alt elipse-v font-12"></span>
                            </a>
                            <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                              <li><a className="dropdown-item" href="#"><i className="ti ti-pencil"></i> Edit</a></li>
                              <li><a className="dropdown-item" href="#"><i className="ti ti-na"></i> Disable</a></li>
                              <li><a className="dropdown-item" href="#"><i className="ti ti-trash"></i> Delete</a></li>
                            </ul>
                          </div>
                        </td>
                      </tr>
                      <tr role="row">
                        <td className="borderrigth" role="cell">Standard plan</td>
                        <td className="borderrigth" role="cell">Unlimited Tests</td>
                        <td className="borderrigth" role="cell">AI Insights & Reporting</td>
                        <td className="borderrigth" role="cell">20</td>
                        <td className="borderrigth" role="cell">₹300.00/M</td>
                        <td className="borderrigth" role="cell">
                          <div className="dropdown text-center">
                            <a href="#" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                              <span className="ti-more-alt elipse-v font-12"></span>
                            </a>
                            <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                              <li><a className="dropdown-item" href="#"><i className="ti ti-pencil"></i> Edit</a></li>
                              <li><a className="dropdown-item" href="#"><i className="ti ti-na"></i> Disable</a></li>
                              <li><a className="dropdown-item" href="#"><i className="ti ti-trash"></i> Delete</a></li>
                            </ul>
                          </div>
                        </td>
                      </tr>
                      <tr role="row">
                        <td className="borderrigth" role="cell">Premium plan</td>
                        <td className="borderrigth" role="cell">Unlimited Tests</td>
                        <td className="borderrigth" role="cell">AI Analytics & Recommendations</td>
                        <td className="borderrigth" role="cell">Unlimited</td>
                        <td className="borderrigth" role="cell">₹500.00/M</td>
                        <td className="borderrigth" role="cell">
                          <div className="dropdown text-center">
                            <a href="#" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                              <span className="ti-more-alt elipse-v font-12"></span>
                            </a>
                            <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                              <li><a className="dropdown-item" href="#"><i className="ti ti-pencil"></i> Edit</a></li>
                              <li><a className="dropdown-item" href="#"><i className="ti ti-na"></i> Disable</a></li>
                              <li><a className="dropdown-item" href="#"><i className="ti ti-trash"></i> Delete</a></li>
                            </ul>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <div className="d-block d-sm-flex mt-4 ">
                    <span className="">Showing 1 to 10 of 57 entries</span>
                    <span className="ms-sm-auto ">
                      <button type="button" disabled  className="btn-outline-light tablebutton me-2 d-sm-inline d-block my-1 btn"> Previous </button>
                      <button type="button" disabled className="btn-outline-light tablebutton me-2 my-1 btn"> &lt;&lt; </button>
                      <button type="button" disabled className="btn-outline-light tablebutton me-2 my-1 btn"> &lt; </button>
                      <button type="button" className="btn-outline-light tablebutton me-2 my-1 btn"> &gt; </button>
                      <button type="button" className="btn-outline-light tablebutton me-2 my-1 btn"> &gt;&gt; </button>
                      <button type="button" className="btn-outline-light tablebutton me-2 d-sm-inline d-block my-1 btn"> Next </button>
                    </span>
                  </div>
                </div>
              </Card.Body>
            </Card>
          </Col>
        </Row>
      </div>
    </>
  );
};
Orders.layout = "Contentlayout";
export default Orders;