/*
 This file is part of GNU Taler
 (C) 2019 Taler Systems SA

 GNU Taler is free software; you can redistribute it and/or modify it under the
 terms of the GNU General Public License as published by the Free Software
 Foundation; either version 3, or (at your option) any later version.

 GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

import { JSX } from "preact/jsx-runtime";
import { NiceSelect } from "./styled/index";
import { h } from "preact";

interface Props {
  value: string;
  onChange: (s: string) => void;
  label: string;
  list: {
    [label: string]: string
  }
  name: string;
  description?: string;
  canBeNull?: boolean;
}

export function SelectList({ name, value, list, canBeNull, onChange, label, description }: Props): JSX.Element {
  return <div>
    <label
      htmlFor={`text-${name}`}
      style={{ marginLeft: "0.5em", fontWeight: "bold" }}
    > {label}</label>
    <NiceSelect>
      <select name={name} onChange={(e) => {
        console.log(e.currentTarget.value, value)
        onChange(e.currentTarget.value)
      }}>
        <option selected>
          {list[value]}
        </option>
        {Object.keys(list)
          .filter((l) => l !== value)
          .map(key => <option value={key} key={key}>{list[key]}</option>)
        }
      </select>
    </NiceSelect>
    {description && <span
      style={{
        color: "#383838",
        fontSize: "smaller",
        display: "block",
        marginLeft: "2em",
      }}
    >
      {description}
    </span>}

  </div>

}