import React, { useState } from "react";
import "./Filter_offcanvas.css";
import Offcanvas from "react-bootstrap/Offcanvas";
import Accordion from "react-bootstrap/Accordion";
import Black_Btn from "../common_btn/black_btn/Black_Btn";

function Filter_offcanvas({
  show,
  handleClose,
  category,
  allsizes,
  allcolours,
  price,
  setPrice,
  selectedSizes,
  setSelectedSizes,
  selectedColours,
  setSelectedColours,
  onApply,
  onReset,
  selectedCategories,
  setSelectedCategories,
  minPriceLimit,
  maxPriceLimit,
}) {
  const [showAllCategories, setShowAllCategories] = useState(false);
  const [showAllSizes, setShowAllSizes] = useState(false);
  const [showAllColours, setShowAllColours] = useState(false);

  const toggleSelection = (id, setter) => {
    setter((prev) =>
      prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id],
    );
  };

  return (
    <Offcanvas
      show={show}
      onHide={handleClose}
      placement="start"
      className="filter_offcanvas"
    >
      <Offcanvas.Header closeButton>
        <Offcanvas.Title>Filters</Offcanvas.Title>
      </Offcanvas.Header>

      <Offcanvas.Body>
        <Accordion defaultActiveKey={["0", "1", "2", "3"]} alwaysOpen>
          <Accordion.Item eventKey="0">
            <Accordion.Header>Category</Accordion.Header>

            <Accordion.Body>
              <div className="checkbox_list">
                {(showAllCategories ? category : category?.slice(0, 8))?.map(
                  (item) => (
                    <label className="checkbox_item" key={item.id}>
                      <input
                        type="checkbox"
                        className="filter-checkbox"
                        checked={selectedCategories?.includes(item.id)}
                        onChange={() =>
                          toggleSelection(item.id, setSelectedCategories)
                        }
                      />

                      <span>{item?.name}</span>
                    </label>
                  ),
                )}
              </div>

              {category?.length > 8 && (
                <button
                  type="button"
                  className="see_more_btn"
                  onClick={() => setShowAllCategories(!showAllCategories)}
                >
                  {showAllCategories ? "See Less" : "See More"}
                </button>
              )}
            </Accordion.Body>
          </Accordion.Item>

          <Accordion.Item eventKey="3">
            <Accordion.Header>Price Range</Accordion.Header>
            <Accordion.Body>
              <div className="range_slider_box">
                <div className="range_value">
                  <span>₹{minPriceLimit}</span>
                  <span>₹{price}</span>
                </div>
                <input
                  type="range"
                  className="custom_range_slider"
                  min={minPriceLimit ?? 0}
                  max={maxPriceLimit ?? 100000}
                  step="500"
                  value={price ?? maxPriceLimit}
                  onChange={(e) => setPrice(Number(e.target.value))}
                />
              </div>
            </Accordion.Body>
          </Accordion.Item>

          <Accordion.Item eventKey="1">
            <Accordion.Header>Size</Accordion.Header>

            <Accordion.Body>
              <div className="checkbox_list">
                {(showAllSizes ? allsizes : allsizes?.slice(0, 8))?.map(
                  (item) => (
                    <label className="checkbox_item" key={item.id}>
                      <input
                        type="checkbox"
                        className="filter-checkbox"
                        checked={selectedSizes.includes(item.id)}
                        onChange={() =>
                          toggleSelection(item.id, setSelectedSizes)
                        }
                      />

                      <span>{item?.name}</span>
                    </label>
                  ),
                )}
              </div>

              {allsizes?.length > 8 && (
                <button
                  type="button"
                  className="see_more_btn"
                  onClick={() => setShowAllSizes(!showAllSizes)}
                >
                  {showAllSizes ? "See Less" : "See More"}
                </button>
              )}
            </Accordion.Body>
          </Accordion.Item>

          <Accordion.Item eventKey="2">
            <Accordion.Header>Colour</Accordion.Header>

            <Accordion.Body>
              <div className="checkbox_list">
                {(showAllColours ? allcolours : allcolours?.slice(0, 8))?.map(
                  (item) => (
                    <label className="checkbox_item" key={item.id}>
                      <input
                        type="checkbox"
                        className="filter-checkbox"
                        checked={selectedColours.includes(item.id)}
                        onChange={() =>
                          toggleSelection(item.id, setSelectedColours)
                        }
                      />

                      <span>{item?.name}</span>
                    </label>
                  ),
                )}
              </div>

              {allcolours?.length > 8 && (
                <button
                  type="button"
                  className="see_more_btn"
                  onClick={() => setShowAllColours(!showAllColours)}
                >
                  {showAllColours ? "See Less" : "See More"}
                </button>
              )}
            </Accordion.Body>
          </Accordion.Item>
        </Accordion>
      </Offcanvas.Body>

      <div className="offcanvas-footer p-3 border-top">
        <div className="row g-2">
          <div className="col-6 other-btn">
            <Black_Btn btnText="Reset" onClick={onReset} />
          </div>

          <div className="col-6">
            <Black_Btn
              btnText="Apply"
              onClick={() => {
                onApply();
                handleClose();
              }}
            />
          </div>
        </div>
      </div>
    </Offcanvas>
  );
}

export default Filter_offcanvas;
