import React, { useCallback, useMemo } from 'react';
import QuickAddMenu from '../../ui/QuickAddMenu';

const SORT_OPTIONS = [
  { value: 'title', label: 'Title' },
  { value: 'issued_at', label: 'Issued date' },
  { value: 'created_at', label: 'Added' },
  { value: 'updated_at', label: 'Updated date' },
];

const SORT_LABEL_LOOKUP = SORT_OPTIONS.reduce((acc, option) => {
  const next = acc;
  next[option.value] = option.label;
  return next;
}, {});

const SortFieldQuickMenu = ({ sortField, onChange }) => {
  const currentOption = useMemo(
    () => SORT_OPTIONS.find((option) => option.value === sortField) || SORT_OPTIONS[0],
    [sortField],
  );

  const options = useMemo(
    () => SORT_OPTIONS.map((option) => ({ id: option.value, label: option.label })),
    [],
  );

  const handleSelect = useCallback(
    (value, option) => {
      if (typeof onChange !== 'function') {
        return;
      }
      const nextValue = option?.id || option?.original?.id || value;
      if (nextValue) {
        onChange(nextValue);
      }
    },
    [onChange],
  );

  const label = currentOption?.label || SORT_LABEL_LOOKUP[currentOption?.value] || 'Title';

  return (
    <QuickAddMenu
      className="documents-sort__quickmenu"
      options={options}
      onSelectOption={handleSelect}
      triggerClassName="view-toggle__button documents-sort__trigger quick-add__trigger"
      triggerContent={(
        <span className="documents-sort__trigger-content">
          <span className="documents-sort__label">{label}</span>
        </span>
      )}
      triggerAriaLabel={`Sort by ${label}`}
      triggerTitle={`Sort by ${label}`}
      placeholder="Select sort field"
      menuMinWidth={200}
      align="start"
      positionStrategy="absolute"
    />
  );
};

export default SortFieldQuickMenu;