import React, { useState } from 'react';
import styled from 'styled-components';
// import RouterHeader from '../header/route-header/RouterHeader';
import HeaderFilter from '../header-filters/HeaderFilter';

import ReturnFilter from './return-orders-filters/ReturnFilter';
import ReturnOrderTable from './return-orders-filters/ReturnOrderTable';
import ModalManager from '../../order-view/modalsPopup/ModalManager';
import { useItemsPerPage, UsePaginationData } from '../store/store';
import Pagination from '../table-view/Pagination';
// import { useLocation } from 'react-router-dom';

const ReturnTable = () => {
  const [paginationObj] = UsePaginationData();
  const [, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
  // const location = useLocation();
  const { page, total } = paginationObj;

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };
  const handleItemsPerPageChange = (itemsPerPage: number) => {
    setItemsPerPage(itemsPerPage);
  };

  // useEffect(() => {
  //   const queryParams = new URLSearchParams(location.search);

  //   const clientId = queryParams.get('customerId');
  // }, [location]);

  return (
    <div>
      <DashBoardWrapper>
        {/* <RouterHeader /> */}
        <div className="Tableconatiner">
          <HeaderFilter />
          <Container>
            <ReturnFilter />
            <ReturnOrderTable />
            {total > 0 && (
              <Pagination
                currentPage={page}
                totalItems={total}
                itemsPerPage={itemsPerPage}
                onPageChange={handlePageChange}
                onItemsPerPageChange={handleItemsPerPageChange}
              ></Pagination>
            )}
          </Container>
        </div>
      </DashBoardWrapper>
      <ModalManager />
    </div>
  );
};
const Container = styled.div`
  position: relative;
  top: -46px;
`;
const DashBoardWrapper = styled.section`
  .Tableconatiner {
    border-radius: 12px;
    background: #fff;
    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);
    display: block;
    padding: 15px 20px;
  }
  .headerWrap,
  .tableData,
  .styleCovered {
    transition: all ease 0.5s;
  }
  &.stickyTableHead {
    h2 {
      font-size: 21px;
    }
    .headerWrap {
      height: 84px;
      padding: 10px;
      border-radius: 0px 0px 15px 15px;
      > div {
        position: relative;
        z-index: 10;
      }
    }
    .styleCovered {
      margin-top: -32px;
      width: 67%;
      float: right;
      gap: 5px;
      padding-right: 11px;

      li {
        padding: 4px 10px 5px 5px;
        gap: 5px;
        .svgCover {
          width: 30px;
          height: 30px;
          svg {
            height: auto;
            width: 58%;
          }
        }
        .countDigit {
          font-size: 19px;
        }
      }
      .countMess {
        font-size: 13px;
      }
    }
    .dmsBulkFilter {
      min-height: unset;
      gap: 4px;
      > div {
        padding: 4px 12px;
        label {
          font-size: 11px;
        }
      }
    }

    .StyledFilterList {
      gap: 4px;
      li {
        height: 29px;
        padding: 3px 8px;
        gap: 4px;
        .StyledFilterBtnIcon {
          width: 20px;
          height: 20px;
          svh {
            width: 10px;
            height: auto;
          }
        }
        .StyledFilterBtnLabel {
          font-size: 13px;
        }
      }
    }
    .StyledFilterLabel {
      padding-left: 10px;
      span {
        font-size: 13px;
      }
    }
    .cardcontainer.tableData {
      max-height: calc(100vh - 310px);
      min-height: calc(100vh - 310px);
    }

    .tableData {
      max-height: calc(100vh - 320px);
      min-height: calc(100vh - 320px);

      margin-top: 8px;
      thead {
        position: sticky;
        top: 0;
        z-index: 9;
        th {
          font-size: 13px;
          padding: 2px 15px;
        }
      }
    }
  }
`;

export default ReturnTable;
