import { useAppSelector } from "@/Redux/Hooks";
import React from "react";
import { CardBody, Col, Collapse, Input, Row } from "reactstrap";

interface CollapseFilterDataProps {
  invoiceNumber: string;
  setInvoiceNumber: any;
  openAmount: string;
  setOpenAmount: any;
  totalAmount: string;
  setTotalAmount: any;
}

export const CollapseFilterData: React.FC<CollapseFilterDataProps> = ({ invoiceNumber, setInvoiceNumber, openAmount, setOpenAmount, totalAmount, setTotalAmount }) => {
  const { filterToggle } = useAppSelector((state) => state.product);

  return (
    <Collapse isOpen={filterToggle}>
      <div className="shadow-none">
        <CardBody className="list-product-body">
          <Row className="row-cols-xl-5 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-2 g-3">
            <Col>
              <Input type="text" placeholder='Invoice #' value={invoiceNumber} onChange={(e) => setInvoiceNumber(e.target.value)} />
            </Col>
            <Col>
              <Input type="number" placeholder='Total Amount' value={totalAmount?.toString()} onChange={(e) => setTotalAmount((e.target.value))} />
            </Col>
            <Col>
              <Input type="number" placeholder='Open Amount' value={openAmount?.toString()} onChange={(e) => setOpenAmount((e.target.value))} />
            </Col>
          </Row>
        </CardBody>
      </div>
    </Collapse>
  );
};