import React from 'react';
import {
  StyledFIlterELements,
  StyledFiter,
  StyledTableFilter,
  Text,
} from '../../filters/FilterStyle';
import RightFilters from './RightFilters';
import { useClientPortal, useCustomerData } from '../../../store';
import { useParams } from 'react-router-dom';
import ReturnRTFilters from '../../../client-portal/ReturnRTFilters';

const ReturnFilter = () => {
  const [customers] = useCustomerData();
  const [clientPortal] = useClientPortal();
  const { status } = useParams();

  const queryParams = new URLSearchParams(location.search);
  const customerId = queryParams.get('customerId');

  const selectedCustomer = customers?.find(
    (customer: any) => customer?.customer_id?.toString() === customerId
  );

  const customerName = selectedCustomer?.customer_name;
  // const accountNumber = selectedCustomer?.account_number;

  const getStatusLabel = (status: string) => {
    switch (status) {
      case 'outstanding_return':
        return 'Outstanding Return';
      case 'scheduled_for_return':
        return 'All Scheduled Orders';
      case 'return_completed':
        return 'View Return Order';
      default:
        return status
          .replace(/_/g, ' ')
          .replace(/\b\w/g, char => char.toUpperCase());
    }
  };

  return (
    <>
      <StyledFiter>
        {!clientPortal ? (
          <>
            <Text>{customerName}</Text>
            <StyledFIlterELements>
              <StyledTableFilter />
            </StyledFIlterELements>
            <RightFilters />
          </>
        ) : (
          <>
            <Text>{status ? getStatusLabel(status) : ''}</Text>
            <ReturnRTFilters />
          </>
        )}
      </StyledFiter>
    </>
  );
};

export default ReturnFilter;
