"use client";

import ReactSelect from "react-select";

type SortOption = {
  label: string;
  value: string;
  sortBy: string;
  sortOrder: string;
};

type Props = {
  total: number;
  showing: number;
  onSortChange: (value: SortOption) => void;
  onFilterOpen: () => void;
  sortOptions: SortOption[];
};

export default function FilterTopBar({
  total,
  showing,
  onSortChange,
  sortOptions,
}: Props) {
  return (
    <div className="filtertp gap-1">
      <div className="paginate">
        <span>
          Showing 1–{showing} of {total} results
        </span>
      </div>

      <div className="sortbtx">
        <span>
          <svg
            width="24"
            height="20"
            viewBox="0 0 24 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M12.2929 13.2929C12.6834 12.9024 13.3166 12.9024 13.7071 13.2929L18 17.5858L22.2929 13.2929C22.6834 12.9024 23.3166 12.9024 23.7071 13.2929C24.0976 13.6834 24.0976 14.3166 23.7071 14.7071L18.7071 19.7071C18.3166 20.0976 17.6834 20.0976 17.2929 19.7071L12.2929 14.7071C11.9024 14.3166 11.9024 13.6834 12.2929 13.2929Z"
              fill="currentColor"
            ></path>
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M18 6C18.5523 6 19 6.4477 19 7V19C19 19.5523 18.5523 20 18 20C17.4477 20 17 19.5523 17 19V7C17 6.4477 17.4477 6 18 6Z"
              fill="currentColor"
            ></path>
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M0 9C0 8.4477 0.44772 8 1 8H10C10.5523 8 11 8.4477 11 9C11 9.5523 10.5523 10 10 10H1C0.44772 10 0 9.5523 0 9Z"
              fill="currentColor"
            ></path>
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M0 1C0 0.44772 0.44772 0 1 0H18C18.5523 0 19 0.44772 19 1C19 1.55228 18.5523 2 18 2H1C0.44772 2 0 1.55228 0 1Z"
              fill="currentColor"
            ></path>
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M0 17C0 16.4477 0.44772 16 1 16H8C8.5523 16 9 16.4477 9 17C9 17.5523 8.5523 18 8 18H1C0.44772 18 0 17.5523 0 17Z"
              fill="currentColor"
            ></path>
          </svg>
          <span>Sort by :</span>
        </span>

        <ReactSelect
          className="min-w-[initial] sm:min-w-[120px]"
          classNamePrefix="react-select"
          options={sortOptions}
          defaultValue={
            sortOptions.find((opt) => opt.value === "createdAt_desc") || null
          }
          onChange={(selectedOption) => {
            if (selectedOption) {
              onSortChange(selectedOption as SortOption);
            }
          }}
          isSearchable={false}
          // menuIsOpen={true}
        />
      </div>
    </div>
  );
}
