import React, { ChangeEvent, CSSProperties } from "react";
import "./select.css";

interface CustomStyleCSS extends CSSProperties {
  "--codex-select-background"?: string;
  "--codex-color"?: string;
  "--codex-border-radius"?: string;
  "--codex-select-border"?: string;
  "--codex-select-icon-url"?: string;
}

type Props = {
  label: string;
  id: string;

  /**
   * Tuple array for options.
   * The first item is the value and the second is the text.
   */
  options: [string, string][];

  /**
   * OnChange event called whenever the select value changed.
   */
  onChange?: (e: ChangeEvent<HTMLSelectElement>) => void | Promise<void>;

  /**
   * Apply custom css variables.
   */
  style?: CustomStyleCSS;

  defaultValue?: string;

  className?: string;
};

export function Select({
  label,
  id,
  options,
  onChange,
  style,
  className,
  defaultValue,
}: Props) {
  return (
    <>
      <label htmlFor={id} className="select-label">
        {label}
      </label>
      <div>
        <select
          id={id}
          className={`select ${className}`}
          onChange={onChange}
          style={style}
          defaultValue={defaultValue}
        >
          {options.map(([value, text]) => (
            <option key={value} value={value}>
              {text}
            </option>
          ))}
        </select>
      </div>
    </>
  );
}