// Libs
// -----------------------------------------------------------------------------
import React, { FC } from 'react';

// Props
// -----------------------------------------------------------------------------
type SelectMultipleProps = Omit<
  React.HTMLProps<HTMLSelectElement>,
  'value' | 'onChange' | 'options'
> & {
  value?: Array<string>;
  onChange?: (values: Array<string>) => void;
  options: Array<{ value: string; label?: string }>;
};

/**
 * Компонент элемента формы select в режиме multiple.
 */
export const SelectMultiple: FC<SelectMultipleProps> = ({
  value,
  onChange,
  options,
  style,
  ...selectProps
}) => {
  return (
    <select
      className="ant-input"
      style={{ ...style, padding: 0 }}
      value={value ?? []}
      onChange={(ev) => {
        const newSelectedIds: Array<string> = [];
        for (const selectedOption of ev.target.selectedOptions) {
          newSelectedIds.push(selectedOption.value);
        }
        if (onChange) {
          onChange(newSelectedIds);
        }
      }}
      multiple
      size={7}
      {...selectProps}
    >
      {options.map((option) => (
        <option key={option.value} value={option.value}>
          {option.label ?? option.value}
        </option>
      ))}
    </select>
  );
};
