import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
// import OrderTable from './table/OrderTable';
// import ReturnOrderFilter from './table-filters/ReturnOrderFilter';
// import { useAtom, useReturnAfterOrderData } from '../../order-view/store';
// import {
//   useItemsPerReturnPage,
//   useLoading,
//   UsePaginationData,
//   UsePaginationReturnData,
// } from '../store/store';
// import { ApiResponse } from '../common/interface';
// import { useAxios } from '@bjsdistribution/dms-component-library';
// import { filtersReducerReturnAtom } from './table-filters/ReturnFilterStore';
// import { notification } from 'antd';
// import ReturnPagination from '../table-view/ReturnPagination';
import {
  useAtom,
  // useCallApiAgain,
  useReturnConfirmedOrderData,
  useSearchAfterText,
} from '../../store';
import ReturnConfirmedTable from './ReturnConfirmedTable';
import {
  useItemsPerReturnPage,
  useLoading,
  UsePaginationData,
  UsePaginationReturnData,
} from '../../order-daily-overview/store/store';
import { filtersReducerReturnAtom } from '../../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
import { useAxios } from '@bjsdistribution/dms-component-library';
import { ApiResponse } from '../../types';
import { notification } from 'antd';
import ReturnPagination from '../../order-daily-overview/table-view/ReturnPagination';
import { useParams } from 'react-router-dom';

const ConfirmedMain = () => {
  const [, setReturnConfirmedData] = useReturnConfirmedOrderData();
  const [, setLoading] = useLoading();
  const [state] = useAtom(filtersReducerReturnAtom);
  // const [callApi] = useCallApiAgain();
  const { 'x-filters': filters, 'x-pagination': pagination } = state;
  const [paginationObj] = UsePaginationReturnData();
  const [, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useItemsPerReturnPage();
  const [, setPaginationObject] = UsePaginationData();
  const { page, total } = paginationObj;
  const [debouncedSearchText] = useSearchAfterText();
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };
  const handleItemsPerPageChange = (itemsPerPage: number) => {
    setItemsPerPage(itemsPerPage);
  };
  const { status } = useParams();

  const {
    data: fetchedReturnOrderData,
    loading,
    paginationData,
    fetchData,
  } = useAxios<ApiResponse>({
    endpoint: '/v1/return/orders/',
    method: 'GET',
    filters: filters && filters?.length > 0 ? filters : undefined,
    pagination: pagination,
  });

  useEffect(() => {
    const shouldFetch = debouncedSearchText === '' && filters?.length > 0;

    if (shouldFetch) {
      fetchData();
    }
  }, [debouncedSearchText, status, JSON.stringify(filters)]);

  useEffect(() => {
    setLoading(loading);

    if (fetchedReturnOrderData?.data) {
      setReturnConfirmedData(fetchedReturnOrderData?.data);

      if (paginationData) {
        try {
          const { count, ...rest } = JSON.parse(paginationData);
          setPaginationObject(rest);
        } catch (error) {
          notification.error({
            message: 'Error',
            description: 'Failed to parse pagination data',
          });
        }
      }
    }
  }, [fetchedReturnOrderData, loading]);

  return (
    <div>
      <DashBoardWrapper>
        {/* <RouterHeader /> */}
        <div className="Tableconatiner">
          {/* <HeaderFilter /> */}
          <Container>
            <ReturnConfirmedTable />
            {total > 0 && (
              <ReturnPagination
                currentPage={page}
                totalItems={total}
                itemsPerPage={itemsPerPage}
                onPageChange={handlePageChange}
                onItemsPerPageChange={handleItemsPerPageChange}
              ></ReturnPagination>
            )}
          </Container>
        </div>
      </DashBoardWrapper>
    </div>
  );
};
const Container = styled.div`
  position: relative;
  /* top: -30px; */
`;
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 ConfirmedMain;
