import React, { useState } from 'react';
import HeaderFilter from '../order-daily-overview/header-filters/HeaderFilter';
import styled from 'styled-components';
import ReturnFilter from '../order-daily-overview/return-order-table/return-orders-filters/ReturnFilter';
import Pagination from '../order-daily-overview/table-view/Pagination';
import {
  useItemsPerPage,
  UsePaginationData,
} from '../order-daily-overview/store/store';
import { useClientPortal } from '../store';
import { useParams } from 'react-router-dom';
import RouterHeader from '../order-daily-overview/header/route-header/RouterHeader';
import OutstandingTable from './OutstandingTable';
import ConfirmedMain from './return-confirm/ConfirmedMain';

const ReturnOverview = () => {
  const [paginationObj] = UsePaginationData();
  const [, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
  const { page, total } = paginationObj;
  const { status } = useParams();
  const [clientPortal] = useClientPortal();

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

  console.log(status, 'status');
  const shouldShowReturnAfterTable =
    (clientPortal && status === 'scheduled_for_return') ||
    (clientPortal && status === 'return_completed');
  return (
    <>
      <RouterHeader />
      <div>
        <DashBoardWrapper>
          <div className="Tableconatiner">
            <HeaderFilter />
            <Container>
              <ReturnFilter />
              {clientPortal && status === 'outstanding_return' && (
                <>
                  <OutstandingTable />
                  {total > 0 && (
                    <Pagination
                      currentPage={page}
                      totalItems={total}
                      itemsPerPage={itemsPerPage}
                      onPageChange={handlePageChange}
                      onItemsPerPageChange={handleItemsPerPageChange}
                    ></Pagination>
                  )}
                </>
              )}
              {shouldShowReturnAfterTable && (
                <>
                  <ConfirmedMain />
                </>
              )}
            </Container>
          </div>
        </DashBoardWrapper>
      </div>
    </>
  );
};
const Container = styled.div`
  position: relative;
  top: -16px;
`;

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 ReturnOverview;
