import React, { useState, useEffect } from "react";
import { MdKeyboardArrowDown } from "react-icons/md";
import { Warehouse } from "../../../../../types/purchase-order";

interface FilterValues {
  warehouseId: number | null;
}

interface FilterPopoverProps {
  isOpen: boolean;
  onClose: () => void;
  onApply: (filters: FilterValues) => void;
  initialFilters: FilterValues;
  warehouses?: Warehouse[];
}

const FilterPopover: React.FC<FilterPopoverProps> = ({
  isOpen,
  onClose,
  onApply,
  initialFilters,
  warehouses,
}) => {
  const [selectedWarehouseId, setSelectedWarehouseId] = useState<number | null>(
    initialFilters.warehouseId
  );

  // Update local state when initial filters change
  useEffect(() => {
    setSelectedWarehouseId(initialFilters.warehouseId);
  }, [initialFilters.warehouseId]);

  // Handle warehouse selection
  const handleWarehouseChange = (warehouseId: number | null) => {
    setSelectedWarehouseId(warehouseId);
  };

  // Apply filters
  const handleApply = () => {
    onApply({
      warehouseId: selectedWarehouseId,
    });
    onClose();
  };

  // Clear all filters
  const handleClear = () => {
    setSelectedWarehouseId(null);
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 overflow-hidden">
      <div className="absolute inset-0 overflow-hidden">
        <div
          className="fixed inset-0 bg-black bg-opacity-25 transition-opacity"
          onClick={onClose}
        />

        <div className="absolute right-0 top-20 max-w-md transform p-4 transition-all md:right-16">
          <div className="bg-white rounded-xl shadow-[0px_4px_34px_0px_rgba(0,59,113,0.16)] overflow-hidden w-72">
            <div className="px-6 py-4 border-b border-gray-200">
              <h2 className="text-lg font-bold text-gray-800">Filter Stocks</h2>
            </div>

            <div className="px-6 py-4">
              <h3 className="font-medium text-gray-400 mb-2">Warehouse</h3>
              <div className="flex items-center rounded-lg border border-gray-300 w-full pr-2">
                <select
                  value={selectedWarehouseId || ""}
                  onChange={(e) =>
                    handleWarehouseChange(
                      e.target.value ? Number(e.target.value) : null
                    )
                  }
                  className="w-full bg-transparent text-sm outline-none appearance-none text-black"
                  style={{ padding: "8px" }}
                >
                  <option value="" style={{ padding: "8px" }}>
                    All Warehouses
                  </option>
                  {warehouses?.map((warehouse) => (
                    <option
                      key={warehouse.id}
                      value={warehouse.id}
                      style={{ padding: "8px" }}
                    >
                      {warehouse.name} - {warehouse.location}
                    </option>
                  ))}
                </select>
                <MdKeyboardArrowDown size={16} className="text-black" />
              </div>
            </div>

            <div className="flex justify-between items-center px-6 py-4 border-t border-gray-100">
              <button
                onClick={handleClear}
                className="text-sm text-gray-600 hover:text-gray-800"
              >
                Clear All
              </button>
              <button
                onClick={handleApply}
                className="bg-[#3997E0] text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700"
              >
                Apply
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FilterPopover;