pizza-online

1
'use client'
2

3
import React from 'react'
4
import {Button, Input} from '../ui'
5
import {FilterCheckbox, FilterCheckboxProps} from './filter-checkbox'
6
import {Title} from './title'
7

8
type Props = {
9
  title: string
10
  items: FilterCheckboxProps[]
11
  defaultItems?: FilterCheckboxProps[]
12
  limit?: number
13
  searchInputPlaceholder?: string
14
  className?: string
15
  onChange?: (values: string[]) => void
16
  defaultValue?: string[]
17
}
18

19
export const FilterIngredients: React.FC<Props> = ({
20
  title,
21
  items,
22
  defaultItems,
23
  limit = 4,
24
  searchInputPlaceholder = 'Поиск...',
25
  className,
26
  onChange,
27
  defaultValue,
28
}) => {
29
  const [showAllIngredients, setShowAllIngredients] = React.useState<number>(limit)
30
  const [searchIngredients, setSearchIngredients] = React.useState<string>('')
31

32
  const handleSearchIngredients = (e: React.ChangeEvent<HTMLInputElement>) => {
33
    setSearchIngredients(e.target.value)
34
  }
35

36
  const filtered = items.filter(item =>
37
    item.text.toLowerCase().includes(searchIngredients.toLowerCase())
38
  )
39

40
  return (
41
    <div className={className}>
42
      <div className="flex justify-between items-center mb-3">
43
        <Title className="font-bold" size="xs" text={title} />
44
        {items.length > showAllIngredients ? (
45
          <Button
46
            variant="ghost"
47
            className="text-primary cursor-pointer"
48
            onClick={() => setShowAllIngredients(items.length)}
49
          >
50
            показать все +{items.slice(4).length}
51
          </Button>
52
        ) : (
53
          <Button
54
            variant="ghost"
55
            className="text-primary cursor-pointer"
56
            onClick={() => setShowAllIngredients(limit)}
57
          >
58
            скрыть
59
          </Button>
60
        )}
61
      </div>
62

63
      {items.length === showAllIngredients && (
64
        <div className="mb-5">
65
          <Input
66
            className="bg-gray-50 border-none"
67
            onChange={handleSearchIngredients}
68
            placeholder={searchInputPlaceholder}
69
          />
70
        </div>
71
      )}
72

73
      <ul className="flex flex-col gap-4 max-h-96 pr-2 overflow-auto scrollbar">
74
        {filtered.slice(0, showAllIngredients).map((item, i) => (
75
          <li key={`${i}${item.text}`}>
76
            <FilterCheckbox
77
              text={item.text}
78
              value={item.value}
79
              onCheckedChange={e => console.log(e)}
80
              checked={false}
81
            />
82
          </li>
83
        ))}
84
      </ul>
85
    </div>
86
  )
87
}
88