import * as React from 'react'
import { DropdownInput } from '../DropdownInput'
import { Config } from '../../../../common/config'

export interface SettingsFormProps extends React.HTMLProps<HTMLElementTagNameMap['form']> {
  defaultValues?: Config
  ranges: Record<string, string>
  scaleFactors: Record<string, string>
  midiAccess?: MIDIAccess
  lastStateChangeTimestamp?: number
  naturalKeyWidths: number[]
}

export const SettingsForm: React.FC<SettingsFormProps> = ({
  disabled,
  midiAccess,
  ranges,
  defaultValues = {},
  scaleFactors,
  lastStateChangeTimestamp,
  naturalKeyWidths,
  ...etcProps
}) => {
  const inputs = typeof midiAccess !== 'undefined' ? Array.from(midiAccess.inputs) : undefined

  return (
    <form {...etcProps}>
      <fieldset disabled={disabled} className="contents">
        <legend className="sr-only">Settings</legend>
        <div className="flex flex-col gap-4">
          <div>
            <DropdownInput
              label="Input device"
              name="queryDeviceKey"
              defaultValue={defaultValues?.['queryDeviceKey']}
              key={lastStateChangeTimestamp}
            >
              {inputs?.map(([name, device]) => (
                <option key={name} value={name}>
                  {device.name}
                </option>
              ))}
            </DropdownInput>
          </div>
          <div className="flex-auto">
            <DropdownInput
              name="range"
              label="Keyboard range"
              defaultValue={defaultValues?.['range']}
            >
              {Object.entries(ranges).map(([name, range]) => (
                <option key={name} value={range}>
                  {name}
                </option>
              ))}
            </DropdownInput>
          </div>
          <div className="flex justify-between items-center gap-8 h-10">
            <div>Scale factor</div>
            <div className="flex items-center gap-8">
              {Object.entries(scaleFactors).map(([label, value]) => (
                <div key={value}>
                  <label>
                    <input
                      name="scaleFactor"
                      type="radio"
                      value={value}
                      defaultChecked={
                        defaultValues?.['scaleFactor']?.toString() === value.toString()
                      }
                    />{' '}
                    {label}
                  </label>
                </div>
              ))}
            </div>
          </div>
          <div className="flex-auto">
            <DropdownInput
              name="naturalKeyWidth"
              label="Natural key width"
              defaultValue={defaultValues?.['naturalKeyWidth']}
            >
              {naturalKeyWidths.map((n) => (
                <option key={n} value={n}>
                  {n}
                </option>
              ))}
            </DropdownInput>
          </div>
          <div className="flex justify-between items-center gap-8">
            <div>Natural key color</div>
            <div>
              <input
                name="naturalKeyColor"
                type="color"
                className="h-10"
                defaultValue={defaultValues?.['naturalKeyColor']}
              />
            </div>
          </div>
          <div className="flex justify-between items-center gap-8">
            <div>Accidental key color</div>
            <div>
              <input
                name="accidentalKeyColor"
                type="color"
                className="h-10"
                defaultValue={defaultValues?.['accidentalKeyColor']}
              />
            </div>
          </div>
          <div className="mt-12 flex gap-4">
            <div className="w-0 flex-auto">
              <button
                className="w-full h-10 rounded border overflow-hidden"
                type="submit"
                name="action"
                value="cancelSaveConfig"
              >
                Cancel
              </button>
            </div>
            <div className="w-0 flex-auto">
              <button
                className="w-full h-10 rounded border overflow-hidden"
                type="submit"
                name="action"
                value="resetConfig"
              >
                Reset to Defaults
              </button>
            </div>
          </div>
          <div>
            <button
              className="w-full h-10 rounded border bg-white text-black overflow-hidden"
              type="submit"
              name="action"
              value="saveConfig"
            >
              Save
            </button>
          </div>
        </div>
      </fieldset>
    </form>
  )
}