import { memo } from 'react'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { Search, SlidersHorizontal } from 'lucide-react'

import './DevicesToolbar.scss'

export type DevicesSortField = 'ID' | 'Serial' | 'Date'
export type DevicesSortDirection = 'ASC' | 'DESC'

export type DevicesSortOption = {
  value: string
  label: string
  sortField: DevicesSortField
  sortDirection: DevicesSortDirection
}

type DevicesToolbarProps = {
  isFiltersOpen: boolean
  onToggleFilters: () => void
  showFilters?: boolean
  onAddDevice: () => void

  search: string
  onSearchChange: (value: string) => void

  sortField: DevicesSortField
  sortDirection: DevicesSortDirection
  onSortChange: (option: DevicesSortOption) => void
}

export const devicesSortOptions: DevicesSortOption[] = [
  {
    value: 'date-desc',
    label: 'Сначала новые',
    sortField: 'Date',
    sortDirection: 'DESC',
  },
  {
    value: 'id-asc',
    label: 'ID по возрастанию',
    sortField: 'ID',
    sortDirection: 'ASC',
  },
  {
    value: 'id-desc',
    label: 'ID по убыванию',
    sortField: 'ID',
    sortDirection: 'DESC',
  },
  {
    value: 'serial-asc',
    label: 'Заводской номер А–Я',
    sortField: 'Serial',
    sortDirection: 'ASC',
  },
  {
    value: 'serial-desc',
    label: 'Заводской номер Я–А',
    sortField: 'Serial',
    sortDirection: 'DESC',
  },
  {
    value: 'date-asc',
    label: 'Сначала старые',
    sortField: 'Date',
    sortDirection: 'ASC',
  },
]

export const DevicesToolbar = memo(function DevicesToolbar({
  isFiltersOpen,
  onToggleFilters,
  showFilters = true,
  onAddDevice,

  search,
  onSearchChange,

  sortField,
  sortDirection,
  onSortChange,
}: DevicesToolbarProps) {

  const selectedSort =
    devicesSortOptions.find(
      (option) =>
        option.sortField === sortField &&
        option.sortDirection === sortDirection,
    ) ?? devicesSortOptions[0]

  return (
    <div className="devices-toolbar">
      <label className="devices-search">
        <Search size={16} />
        <input
          placeholder="Поиск"
          value={search}
          onChange={(e) =>
            onSearchChange(e.target.value)
          }
        />
      </label>

      <div className="devices-toolbar__right">

        <DropdownMenu.Root>
          <DropdownMenu.Trigger asChild>
            <button className="devices-sort" type="button">
              {selectedSort.label}
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 10h7m-7 4h5m-5 4h3M11 6h10M7 18.813C6.607 19.255 5.56 21 5 21m-2-2.187C3.393 19.255 4.44 21 5 21m0 0v-6M3 5.188C3.393 4.745 4.44 3 5 3m2 2.188C6.607 4.745 5.56 3 5 3m0 0v6" />
              </svg>
            </button>
          </DropdownMenu.Trigger>

          <DropdownMenu.Portal>
            <DropdownMenu.Content
              className="devices-sort-menu"
              align="end"
              sideOffset={8}
            >
              {devicesSortOptions.map((option) => (
                <DropdownMenu.Item
                  key={option.value}
                  className="devices-sort-menu__item"
                  onSelect={() => onSortChange(option)}
                >
                  <span>{option.label}</span>

                  {selectedSort.value === option.value && (
                    <span className="devices-sort-menu__check" />
                  )}
                </DropdownMenu.Item>
              ))}
            </DropdownMenu.Content>
          </DropdownMenu.Portal>
        </DropdownMenu.Root>
        <button className="add-device" type="button" onClick={onAddDevice}>
          Добавить устройство
        </button>

        {showFilters && (
          <button
            className={`devices-filter ${isFiltersOpen ? 'devices-filter--active' : ''}`}
            type="button"
            aria-label="Фильтр"
            onClick={onToggleFilters}
          >
            <SlidersHorizontal size={16} />
            <span className="devices-filter__alert" />
          </button>
        )}
      </div>
    </div>
  )
})
