import { useMemo, useState } from 'react';
import { Text } from 'components/common';

interface MultiselectProps {
  label: string;
  name: string;
  options: { value: string; label: string }[];
  state: string[];
  onChange: React.ChangeEventHandler<HTMLInputElement>;
  max?: number;
}

export const Multiselect = ({
  label,
  options,
  name,
  state,
  onChange,
  max = 5,
}: MultiselectProps) => {
  const [search, setSearch] = useState('');

  const handleSearch: React.ChangeEventHandler<HTMLInputElement> = (ev) => {
    setSearch(ev.target.value);
  };

  const filtered = useMemo(
    () =>
      options.filter((item) => {
        const name = item.label?.toLowerCase();
        return name.startsWith(search.toLowerCase());
      }),
    [options, search]
  );

  return (
    <div className="spacingY2">
      <div className="paddingX4 spacingY2">
        <div className="fz14 medium">{label}</div>
        <input
          className="fz14"
          style={{
            outline: 0,
            border: 0,
            padding: 0,
            // background: 'var(--colorGrayA01)'
          }}
          type="text"
          value={search}
          onChange={handleSearch}
          placeholder="Search"
        />
      </div>
      <div className="oa customScroll" style={{ height: max * 32 + 16 }}>
        {filtered.map((item) => {
          return (
            <label
              className="flex alignCenter justifyBetween paddingX4 spacing2 cup hover1"
              style={{ height: 32, lineHeight: '32px' }}
              key={item.value}
            >
              <Text size="s" truncate>
                {item.label}
              </Text>
              <input
                type="checkbox"
                name={name}
                value={item.value}
                checked={state.indexOf(item.value) !== -1}
                onChange={onChange}
              />
            </label>
          );
        })}
      </div>
    </div>
  );
};