import clsx from 'clsx';
import React from 'react';

export type KintonePluginSelectOptionData = {
  value: string;
  label: string;
  disabled?: boolean;
};

export type KintonePluginSelectProps = {
  className?: string;
  value: string;
  onChange: (value: string) => void;
  options: KintonePluginSelectOptionData[];
};

const KintonePluginSelect: React.FC<KintonePluginSelectProps> = (props) => {
  const { className, value, onChange, options } = props;
  const optionWithKeys = React.useMemo(
    () =>
      options.map((option) => ({
        ...option,
        key: crypto.randomUUID(),
      })),
    [options],
  );
  if (options.length === 0) {
    return null;
  }
  const handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    onChange(e.target.value);
  };
  return (
    <div className={clsx('kintoneplugin-select-outer', className)}>
      <div className="kintoneplugin-select">
        <select value={value} onChange={handleOnChange}>
          {optionWithKeys.map(({ key, value: itemValue, label, disabled }) => (
            <option key={key} value={itemValue} disabled={disabled}>
              {label}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};
export default KintonePluginSelect;