import moment from 'moment'
import React, { useEffect, useState } from 'react'
import { Badge, Button, Table } from 'react-bootstrap'
import ReactPaginate from 'react-paginate'
import { useSelector } from 'react-redux'
import { useSearchParams } from 'react-router-dom'
import { useImmer } from 'use-immer'
import Previewicon from '../../../components/AllSvgIcon/Previewicon'
import HKBadge from '../../../components/Badges'
import Loader from '../../../components/Loader'
import SearchBox from '../../../components/Searchbox'
import CustomToast from '../../../components/Toast/CustomToast'
import { customStyles } from '../../../components/customStyles'
import {
  calculatePageRange,
  encodedSearchText,
  fetchOrderData,
  showToast
} from '../../../lib/AllGlobalFunction'
import {
  allCrudNames,
  allPages,
  checkPageAccess
} from '../../../lib/AllPageNames'
import {
  _orderStatus_,
  currencyIcon,
  pageRangeDisplayed
} from '../../../lib/AllStaticVariables'
import axiosProvider from '../../../lib/AxiosProvider'
import { _exception } from '../../../lib/exceptionMessage'
import useDebounce from '../../../lib/useDebounce'
import OrderDetail from './OrderDetail'

const MainOrder = ({ type }) => {
  const [searchParams] = useSearchParams()
  const status = searchParams.get('status')
  const [searchText, setSearchText] = useState()
  const [data, setData] = useState()
  const [orderCount, setOrderCount] = useState()
  const [loading, setLoading] = useState(true)
  const [toast, setToast] = useState({
    show: false,
    text: null,
    variation: null
  })
  const [filterDetails, setFilterDetails] = useImmer({
    pageSize: 50,
    pageIndex: 1,
    searchText: '',
    status:
      type === 'Initiate' || type === 'Failed' ? type : status ? status : ''
  })
  const [orderDetailModalShow, setOrderDetailModalShow] = useState({
    show: false,
    data: null
  })
  const { pageAccess } = useSelector((state) => state.user)

  const debounceSearchText = useDebounce(searchText, 500)

  useEffect(() => {
    if (debounceSearchText) {
      setFilterDetails((draft) => {
        draft.searchText = debounceSearchText
        draft.pageIndex = 1
      })
    } else {
      setFilterDetails((draft) => {
        draft.searchText = ''
        draft.pageIndex = 1
      })
    }
  }, [debounceSearchText])

  const fetchData = async () => {
    setLoading(true)
    const response = await fetchOrderData(
      `?status=${filterDetails?.status}&searchText=${encodedSearchText(
        filterDetails?.searchText
      )}&pageIndex=${filterDetails?.pageIndex}&pageSize=${
        filterDetails?.pageSize
      }`,
      toast,
      setToast
    )
    setLoading(false)
    if (response?.status === 200) {
      setData(response)
    }

    if (!orderCount && !type) {
      const count = await axiosProvider({
        method: 'GET',
        endpoint: 'Dashboard/getOrderCounts?days=All'
      })

      if (count) {
        setOrderCount(count?.data?.data)
      }
    }
  }

  useEffect(() => {
    fetchData()
  }, [filterDetails])

  const handlePageClick = (event) => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
    setFilterDetails((draft) => {
      draft.pageIndex = event.selected + 1
    })
  }

  const getOrderItems = async (id, innerItemData = null) => {
    try {
      let innerItem = innerItemData ? innerItemData : data?.data?.data
      let index = innerItem?.findIndex((item) => item?.orderId === id)
      setLoading(true)

      const response = await axiosProvider({
        method: 'GET',
        endpoint: 'Admin/Order/getOrderItemDetails',
        queryString: `?orderId=${id}`
      })
      setLoading(false)

      if (response?.status === 200) {
        let orderItems = response?.data?.data

        setOrderDetailModalShow({
          show: true,
          data: { ...innerItem[index], orderItems }
        })

        innerItem[index] = {
          ...innerItem[index],
          orderItems
        }
      }

      setData({
        ...data,
        data: { ...data?.data, data: innerItem }
      })
    } catch {
      setLoading(false)
      showToast(toast, setToast, {
        data: {
          message: _exception?.message,
          code: 204
        }
      })
    }
  }
  return (
    <>
      {orderCount && type !== 'Initiate' && type !== 'Failed' && (
        <div className='pv-orderfilter-main d-flex flex-wrap gap-2 mt-3 mb-4'>
          <span
            role='button'
            className={
              !filterDetails?.status
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = ''
                draft.pageIndex = 1
              })
            }}
          >
            Total: {orderCount?.totalOrders}
          </span>
          <span
            role='button'
            className={
              filterDetails?.status === _orderStatus_?.placed
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = _orderStatus_?.placed
                draft.pageIndex = 1
              })
            }}
          >
            Placed: {orderCount?.pending}
          </span>
          <span
            role='button'
            className={
              filterDetails?.status === _orderStatus_?.confirmed
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = _orderStatus_?.confirmed
                draft.pageIndex = 1
              })
            }}
          >
            Confirmed: {orderCount?.confirmed}
          </span>
          <span
            role='button'
            className={
              filterDetails?.status === _orderStatus_?.partialConfirmed
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = _orderStatus_?.partialConfirmed
                draft.pageIndex = 1
              })
            }}
          >
            Partial Confirmed: {orderCount?.partialConfirmed}
          </span>
          <span
            role='button'
            className={
              filterDetails?.status === _orderStatus_?.packed
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = _orderStatus_?.packed
                draft.pageIndex = 1
              })
            }}
          >
            Packed: {orderCount?.packed}
          </span>
          <span
            role='button'
            className={
              filterDetails?.status === _orderStatus_?.partialPacked
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = _orderStatus_?.partialPacked
                draft.pageIndex = 1
              })
            }}
          >
            Partial Packed: {orderCount?.partialPacked}
          </span>
          <span
            role='button'
            className={
              filterDetails?.status === _orderStatus_?.ship
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = _orderStatus_?.ship
                draft.pageIndex = 1
              })
            }}
          >
            Shipped: {orderCount?.shipped}
          </span>
          <span
            role='button'
            className={
              filterDetails?.status === _orderStatus_?.partialShipped
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = _orderStatus_?.partialShipped
                draft.pageIndex = 1
              })
            }}
          >
            Partial Shipped: {orderCount?.partialShipped}
          </span>
          <span
            role='button'
            className={
              filterDetails?.status === _orderStatus_?.delivered
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = _orderStatus_?.delivered
                draft.pageIndex = 1
              })
            }}
          >
            Delivered: {orderCount?.delivered}
          </span>
          <span
            role='button'
            className={
              filterDetails?.status === _orderStatus_?.partialDelivered
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = _orderStatus_?.partialDelivered
                draft.pageIndex = 1
              })
            }}
          >
            Partial Delivered: {orderCount?.partialDelivered}
          </span>
          <span
            role='button'
            className={
              filterDetails?.status === _orderStatus_?.cancelled
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = _orderStatus_?.cancelled
                draft.pageIndex = 1
              })
            }}
          >
            Cancelled: {orderCount?.cancelled}
          </span>
          <span
            role='button'
            className={
              filterDetails?.status === _orderStatus_?.returned
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = _orderStatus_?.returned
                draft.pageIndex = 1
              })
            }}
          >
            Returned: {orderCount?.returned}
          </span>
          <span
            role='button'
            className={
              filterDetails?.status === _orderStatus_?.replaced
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = _orderStatus_?.replaced
                draft.pageIndex = 1
              })
            }}
          >
            Replaced: {orderCount?.replaced}
          </span>
          <span
            role='button'
            className={
              filterDetails?.status === _orderStatus_?.exchanged
                ? 'pv-order-badge active'
                : 'pv-order-badge'
            }
            onClick={() => {
              setFilterDetails((draft) => {
                draft.status = _orderStatus_?.exchanged
                draft.pageIndex = 1
              })
            }}
          >
            Exchanged: {orderCount?.exchanged}
          </span>
        </div>
      )}
      <div className='d-flex align-items-center mb-3 gap-3 flex-row justify-content-between'>
        <div className='d-flex gap-3 align-items-center'>
          <SearchBox
            placeholderText={'Search'}
            value={searchText}
            searchclassnamewrapper={'searchbox-wrapper'}
            onChange={(e) => {
              setSearchText(e?.target?.value)
            }}
          />

          <div className='page-range'>
            {calculatePageRange({
              ...filterDetails,
              recordCount: data?.data?.pagination?.recordCount ?? 0
            })}
          </div>

          <div className='d-flex align-items-center'>
            <label className='me-1'>Show</label>
            <select
              styles={customStyles}
              menuPortalTarget={document.body}
              name='dataget'
              id='parpageentries'
              className='form-select me-1'
              value={filterDetails?.pageSize}
              onChange={(e) => {
                setFilterDetails((draft) => {
                  draft.pageSize = e?.target?.value
                  draft.pageIndex = 1
                })
              }}
            >
              <option value='10'>10</option>
              <option value='25'>25</option>
              <option value='50'>50</option>
              <option value='100'>100</option>
              <option value='200'>200</option>
              <option value='500'>500</option>
            </select>
          </div>
        </div>
        <div className='d-flex gap-3 align-items-center'>
          <Button
            variant='secondary'
            className='d-flex align-items-center gap-2 fw-semiboldd-flex align-items-center gap-2 fw-semibold ms-auto'
            onClick={() => {
              fetchData()
            }}
          >
            <i className='m-icon m-icon--sync-icon' />
            Sync Orders
          </Button>
        </div>
      </div>

      {toast?.show && (
        <CustomToast text={toast?.text} variation={toast?.variation} />
      )}

      {loading && <Loader />}

      <Table responsive className='align-middle table-list'>
        <thead>
          <tr>
            <th>Order By</th>
            <th>Order Number</th>
            <th>Order Date</th>
            <th>User Details</th>
            <th>Total Amount</th>
            <th>Payment Mode</th>
            <th>Order Status Date</th>
            <th>Order Status</th>
            {checkPageAccess(pageAccess, allPages?.order, [
              allCrudNames?.update,
              allCrudNames?.delete
            ]) && <th className='text-center'>Action</th>}
          </tr>
        </thead>
        <tbody>
          {data?.data?.data?.length > 0 ? (
            data?.data?.data?.map((innerData, index) => (
              <tr key={Math.floor(Math.random() * 100000)}>
                <td>
                  <Badge bg='warning'>{innerData?.orderBy}</Badge>
                  {/* <div className='d-flex gap-2 align-items-center'>
                    <Image
                      src={
                        data?.logo
                          ? `${process.env.REACT_APP_IMG_URL}${_brandImg_}${data?.logo}`
                          : 'https://placehold.jp/50x50.png'
                      }
                      className='rounded-1 img-object-fit-con'
                      height='50px'
                      width='50px'
                    />
                    <span>{data.name}</span>
                  </div> */}
                </td>
                <td>{innerData?.orderNo}</td>
                <td>{moment(innerData?.orderDate).format('DD/MM/YYYY')}</td>
                <td>
                  <div className='d-flex flex-column gap-1 align-items-start'>
                    {innerData?.userName && (
                      <Badge bg='secondary'>Name: {innerData?.userName}</Badge>
                    )}
                    {innerData?.userEmail && (
                      <Badge bg='secondary'>
                        Email: {innerData?.userEmail}
                      </Badge>
                    )}
                    {innerData?.userPhoneNo && (
                      <Badge bg='secondary'>
                        Mobile: {innerData?.userPhoneNo}
                      </Badge>
                    )}
                  </div>
                </td>
                <td>
                  {currencyIcon} {innerData?.paidAmount}
                </td>
                <td className='text-uppercase'>
                  <Badge
                    bg={innerData?.paymentMode === 'cod' ? 'danger' : 'success'}
                  >
                    {innerData?.paymentMode}
                  </Badge>
                </td>
                <td>{moment(innerData.orderDate).format('DD/MM/YYYY')}</td>
                <td>
                  <HKBadge
                    badgesbgname={
                      innerData?.status === _orderStatus_.placed
                        ? 'badge bg-Placed'
                        : innerData?.status === _orderStatus_.delivered
                        ? 'badge bg-Delivered'
                        : innerData?.status == _orderStatus_.partialDelivered
                        ? 'badge badge-PartialDelivered'
                        : innerData?.status == _orderStatus_.ship
                        ? 'badge bg-Shipped'
                        : innerData?.status === _orderStatus_.PartialShipped
                        ? 'badge badge-shipconfirmed'
                        : innerData?.status === _orderStatus_.confirmed
                        ? 'badge bg-Confirmed'
                        : innerData?.status === _orderStatus_.PartialConfirmed
                        ? 'badge badge-deliveredconfirmed'
                        : innerData?.status === _orderStatus_.packed
                        ? 'badge bg-Packed'
                        : innerData?.status === _orderStatus_.returnRejected
                        ? 'badge bg-Return-Rejected'
                        : innerData?.status === _orderStatus_.cancelled ||
                          innerData?.status === _orderStatus_.returned
                        ? 'badge bg-Cancelled'
                        : 'badge bg-Returned'
                    }
                    badgesTxtname={innerData?.status}
                    badgeClassname={''}
                  />
                </td>
                {checkPageAccess(pageAccess, allPages?.order, [
                  allCrudNames?.update,
                  allCrudNames?.delete
                ]) && (
                  <td className='text-center'>
                    <div className='d-flex gap-2 justify-content-center'>
                      {checkPageAccess(
                        pageAccess,
                        allPages?.order,
                        allCrudNames?.update
                      ) && (
                        <span
                          onClick={async () => {
                            try {
                              console.log(innerData?.orderId)
                              if (
                                !innerData?.orderItems &&
                                !innerData?.orderItems?.length
                              ) {
                                getOrderItems(innerData?.orderId)
                              } else {
                                setOrderDetailModalShow({
                                  show: !orderDetailModalShow.show,
                                  data: innerData
                                })
                              }
                            } catch {
                              setLoading(false)

                              showToast(toast, setToast, {
                                data: {
                                  message: _exception?.message,
                                  code: 204
                                }
                              })
                            }
                          }}
                        >
                          <Previewicon bg={'bg'} />
                        </span>
                      )}
                      {/* {checkPageAccess(
                        pageAccess,
                        allPages?.order,
                        allCrudNames?.delete
                      ) && (
                        <span
                          onClick={() => {
                            Swal.fire({
                              title: _SwalDelete.title,
                              text: _SwalDelete.text,
                              icon: _SwalDelete.icon,
                              showCancelButton: _SwalDelete.showCancelButton,
                              confirmButtonColor:
                                _SwalDelete.confirmButtonColor,
                              cancelButtonColor: _SwalDelete.cancelButtonColor,
                              confirmButtonText: _SwalDelete.confirmButtonText,
                              cancelButtonText: _SwalDelete.cancelButtonText
                            }).then((result) => {
                              if (result.isConfirmed) {
                                handleDelete(innerData?.id)
                              } else if (result.isDenied) {
                              }
                            })
                          }}
                        >
                          <DeleteIcon bg={'bg'} />
                        </span>
                      )} */}
                    </div>
                  </td>
                )}
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={10} className='text-center'>
                {data?.data?.message}
              </td>
            </tr>
          )}
        </tbody>
      </Table>

      {data?.data?.pagination?.pageCount > 0 && (
        <ReactPaginate
          className='list-inline m-cst--pagination d-flex justify-content-end gap-1'
          breakLabel='...'
          nextLabel=''
          onPageChange={handlePageClick}
          pageRangeDisplayed={pageRangeDisplayed}
          pageCount={data?.data?.pagination?.pageCount}
          previousLabel=''
          renderOnZeroPageCount={null}
          forcePage={filterDetails?.pageIndex - 1}
        />
      )}
      {orderDetailModalShow?.show && (
        <OrderDetail
          orderDetailModalShow={orderDetailModalShow}
          setOrderDetailModalShow={setOrderDetailModalShow}
          setLoading={setLoading}
          getOrderItems={getOrderItems}
          filterDetails={filterDetails}
        />
      )}
    </>
  )
}

export default MainOrder