// src/components/filters/Filter.jsx
import React, { useMemo } from "react";
import { LuBox, LuFile, LuTrash2 } from "react-icons/lu";
import { FaFileAlt, FaStar } from "react-icons/fa";
import { HiOutlineDocumentText, HiOutlinePencilSquare, HiOutlineUser } from "react-icons/hi2";
import { HiOutlineCloudUpload, HiOutlinePhotograph } from "react-icons/hi";

import ClearChipButton from "./filters/ClearChipButton";
import Dropdown from "./filters/Dropdown";
import OwnerFilterDropdown from "./filters/OwnerFilterDropdown";

export default function Filter({
  selectedType,
  onTypeChange,
  selectedChanges,
  onChangesChange,
  selectedSpace,
  onSpaceChange,
  selectedOwnerEmail,
  onOwnerChange,
  owners = [],
}) {
  const typeItems = useMemo(
    () => [
      { value: "folders", label: "پوشه‌ها", icon: <LuBox className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "docs", label: "اسناد", icon: <HiOutlineDocumentText className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "sheets", label: "صفحات گسترده", icon: <LuFile className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "slides", label: "ارائه‌ها", icon: <FaFileAlt className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "videos", label: "ویدیوها", icon: <HiOutlineCloudUpload className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "forms", label: "فرم‌ها", icon: <HiOutlineDocumentText className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "photos", label: "تصاویر", icon: <HiOutlinePhotograph className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "pdfs", label: "PDF ها", icon: <FaFileAlt className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "archives", label: "فایل‌های فشرده", icon: <LuBox className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "audio", label: "فایل‌های صوتی", icon: <HiOutlineCloudUpload className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "drawings", label: "نقاشی‌ها", icon: <HiOutlineDocumentText className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "websites", label: "وب‌سایت‌ها", icon: <HiOutlineCloudUpload className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "shortcuts", label: "میانبرها", icon: <HiOutlineCloudUpload className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
    ],
    []
  );

  const changesItems = useMemo(
    () => [
      { value: "today", label: "امروز" },
      { value: "7days", label: "۷ روز گذشته" },
      { value: "30days", label: "۳۰ روز گذشته" },
      { value: "thisYear", label: "امسال" },
      { value: "lastYear", label: "سال گذشته" },
      { value: "custom", label: "محدوده تاریخ سفارشی", isCustom: true, icon: <HiOutlinePencilSquare className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
    ],
    []
  );

  const spaceItems = useMemo(
    () => [
      { value: "anywhere", label: "در هر نقطه از درایو", icon: <HiOutlineCloudUpload className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "myDrive", label: "درایو من", icon: <LuBox className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "shared", label: "اشتراک‌گذاشته شده من", icon: <HiOutlineUser className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "starred", label: "ستاره‌دار", icon: <FaStar className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
      { value: "trash", label: "حذف‌شده", icon: <LuTrash2 className="w-4 h-4 dark:text-white text-[#43BEFF]" /> },
    ],
    []
  );

  return (
    <div className="dark:text-white w-full flex-wrap flex sm:gap-4 justify-evenly">
      {/* نوع فایل */}
      <div className="flex sm:w-fit w-1/2 sm:p-0 p-1 items-center gap-1">
        <Dropdown
          id="type"
          label="نوع فایل"
          icon={<HiOutlineDocumentText className="h-5 w-5 ml-1.5 dark:text-white text-[#43BEFF]" />}
          items={typeItems}
          selectedValue={typeItems.find((t) => t.label === selectedType)?.value || null}
          onSelect={(value) => {
            const item = typeItems.find((t) => t.value === value);
            onTypeChange?.(item ? item.label : null);
          }}
          width={280}
        />
        {selectedType && <ClearChipButton onClick={() => onTypeChange?.(null)} />}
      </div>

      {/* تغییرات */}
      <div className="flex sm:w-fit w-1/2 sm:p-0 p-1 items-center gap-1">
        <Dropdown
          id="changes"
          label="تغییرات"
          icon={<HiOutlinePencilSquare className="h-5 w-5 ml-1.5 dark:text-white text-[#43BEFF]" />}
          items={changesItems}
          selectedValue={selectedChanges}
          onSelect={(value, extra) => {
            // extra = {from,to} برای custom
            onChangesChange?.(value ?? null);
          }}
          width={280}
        />
        {selectedChanges && <ClearChipButton onClick={() => onChangesChange?.(null)} />}
      </div>

      {/* دسترسی */}
      <div className="flex sm:w-fit w-1/2 sm:p-0 p-1 items-center gap-1">
        <OwnerFilterDropdown
          owners={owners}
          selectedOwnerEmail={selectedOwnerEmail}
          onOwnerChange={onOwnerChange}
          width={340}
        />
        {selectedOwnerEmail && <ClearChipButton onClick={() => onOwnerChange?.(null)} />}
      </div>

      {/* فضا */}
      <div className="flex sm:w-fit w-1/2 sm:p-0 p-1 items-center gap-1">
        <Dropdown
          id="space"
          label="فضا"
          icon={<HiOutlineCloudUpload className="h-5 w-5 ml-1.5 dark:text-white text-[#43BEFF]" />}
          items={spaceItems}
          selectedValue={selectedSpace}
          onSelect={(value) => onSpaceChange?.(value ?? null)}
          width={280}
        />
        {selectedSpace && <ClearChipButton onClick={() => onSpaceChange?.(null)} />}
      </div>
    </div>
  );
}
