import { defaultSettings, settingsMap, useSettings } from '../../../settings.mjs';

import { themes } from '@strudel/codemirror';

import { Textbox } from '../textbox/Textbox.jsx';

import { isUdels } from '../../util.mjs';

import { ButtonGroup } from './Forms.jsx';

import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';

import { AudioEngineTargetSelector } from './AudioEngineTargetSelector.jsx';

import { confirmDialog } from '../../util.mjs';

import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony, setMultiChannelOrbits } from '@strudel/webaudio';

function Checkbox({ label, value, onChange, disabled = false }) {

  return (

    <label>

      <input disabled={disabled} type="checkbox" checked={value} onChange={onChange} />

      {' ' + label}

    </label>

  );

}

function SelectInput({ value, options, onChange }) {

  return (

    <select

      className="p-2 bg-background rounded-md text-foreground  border-foreground"

      value={value}

      onChange={(e) => onChange(e.target.value)}

    >

      {Object.entries(options).map(([k, label]) => (

        <option key={k} className="bg-background" value={k}>

          {label}

        </option>

      ))}

    </select>

  );

}

function NumberSlider({ value, onChange, step = 1, ...rest }) {

  return (

    <div className="flex space-x-2 gap-1">

      <input

        className="p-2 grow"

        type="range"

        value={value}

        step={step}

        onChange={(e) => onChange(Number(e.target.value))}

        {...rest}

      />

      <input

        type="number"

        value={value}

        step={step}

        className="w-16 bg-background rounded-md"

        onChange={(e) => onChange(Number(e.target.value))}

      />

    </div>

  );

}

function FormItem({ label, children, sublabel }) {

  return (

    <div className="grid gap-2">

      <label>{label}</label>

      {children}

    </div>

  );

}

const themeOptions = Object.fromEntries(Object.keys(themes).map((k) => [k, k]));

const fontFamilyOptions = {

  monospace: 'monospace',

  Courier: 'Courier',

  CutiePi: 'CutiePi',

  JetBrains: 'JetBrains',

  Hack: 'Hack',

  FiraCode: 'FiraCode',

  'FiraCode-SemiBold': 'FiraCode SemiBold',

  teletext: 'teletext',

  tic80: 'tic80',

  mode7: 'mode7',

  BigBlueTerminal: 'BigBlueTerminal',

  x3270: 'x3270',

  Monocraft: 'Monocraft',

  PressStart: 'PressStart2P',

  'we-come-in-peace': 'we-come-in-peace',

  galactico: 'galactico',

};

const RELOAD_MSG = 'Changing this setting requires the window to reload itself. OK?';

export function SettingsTab({ started }) {

  const {

    theme,

    keybindings,

    isBracketClosingEnabled,

    isBracketMatchingEnabled,

    isLineNumbersDisplayed,

    isPatternHighlightingEnabled,

    isActiveLineHighlighted,

    isAutoCompletionEnabled,

    isTooltipEnabled,

    isFlashEnabled,

    isButtonRowHidden,

    isCSSAnimationDisabled,

    isSyncEnabled,

    isLineWrappingEnabled,

    fontSize,

    fontFamily,

    panelPosition,

    audioDeviceName,

    audioEngineTarget,

    togglePanelTrigger,

    maxPolyphony,

    multiChannelOrbits,

    isTabIndentationEnabled,

    isMultiCursorEnabled,

    patternAutoStart,

  } = useSettings();

  const shouldAlwaysSync = isUdels();

  const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;

  return (

    <div className="text-foreground p-4 space-y-4 w-full" style={{ fontFamily }}>

      {canChangeAudioDevice && (

        <FormItem label="Audio Output Device">

          <AudioDeviceSelector

            isDisabled={started}

            audioDeviceName={audioDeviceName}

            onChange={(audioDeviceName) => {

              confirmDialog(RELOAD_MSG).then((r) => {

                if (r == true) {

                  settingsMap.setKey('audioDeviceName', audioDeviceName);

                  return window.location.reload();

                }

              });

            }}

          />

        </FormItem>

      )}

      <FormItem label="Audio Engine Target">

        <AudioEngineTargetSelector

          target={audioEngineTarget}

          onChange={(target) => {

            confirmDialog(RELOAD_MSG).then((r) => {

              if (r == true) {

                settingsMap.setKey('audioEngineTarget', target);

                return window.location.reload();

              }

            });

          }}

        />

      </FormItem>

      <FormItem label="Maximum Polyphony">

        <Textbox

          min={1}

          max={Infinity}

          onBlur={(e) => {

            let v = parseInt(e.target.value);

            v = isNaN(v) ? DEFAULT_MAX_POLYPHONY : v;

            setMaxPolyphony(v);

            settingsMap.setKey('maxPolyphony', v);

          }}

          onChange={(v) => {

            v = Math.max(1, parseInt(v));

            settingsMap.setKey('maxPolyphony', isNaN(v) ? undefined : v);

          }}

          type="number"

          placeholder=""

          value={maxPolyphony ?? ''}

        />

      </FormItem>

      <FormItem>

        <Checkbox

          label="Multi Channel Orbits"

          onChange={(cbEvent) => {

            const val = cbEvent.target.checked;

            confirmDialog(RELOAD_MSG).then((r) => {

              if (r == true) {

                settingsMap.setKey('multiChannelOrbits', val);

                setMultiChannelOrbits(val);

                return window.location.reload();

              }

            });

          }}

          value={multiChannelOrbits}

        />

      </FormItem>

      <FormItem label="Theme">

        <SelectInput options={themeOptions} value={theme} onChange={(theme) => settingsMap.setKey('theme', theme)} />

      </FormItem>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 font-sans">

        <FormItem label="Font Family">

          <SelectInput

            options={fontFamilyOptions}

            value={fontFamily}

            onChange={(fontFamily) => settingsMap.setKey('fontFamily', fontFamily)}

          />

        </FormItem>

        <FormItem label="Font Size">

          <NumberSlider

            value={fontSize}

            onChange={(fontSize) => settingsMap.setKey('fontSize', fontSize)}

            min={10}

            max={40}

            step={2}

          />

        </FormItem>

      </div>

      <FormItem label="Keybindings">

        <ButtonGroup

          value={keybindings}

          onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}

          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs', vscode: 'VSCode' }}

        ></ButtonGroup>

      </FormItem>

      <FormItem label="Panel Position">

        <ButtonGroup

          value={panelPosition}

          onChange={(value) => settingsMap.setKey('panelPosition', value)}

          items={{ bottom: 'Bottom', right: 'Right' }}

        ></ButtonGroup>

      </FormItem>

      <FormItem label="Open Panel on:                       ">

        <ButtonGroup

          value={togglePanelTrigger}

          onChange={(value) => settingsMap.setKey('togglePanelTrigger', value)}

          items={{ click: 'Click', hover: 'Hover' }}

        />

      </FormItem>

      <FormItem label="More Settings">

        <Checkbox

          label="Enable bracket matching"

          onChange={(cbEvent) => settingsMap.setKey('isBracketMatchingEnabled', cbEvent.target.checked)}

          value={isBracketMatchingEnabled}

        />

        <Checkbox

          label="Auto close brackets"

          onChange={(cbEvent) => settingsMap.setKey('isBracketClosingEnabled', cbEvent.target.checked)}

          value={isBracketClosingEnabled}

        />

        <Checkbox

          label="Display line numbers"

          onChange={(cbEvent) => settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)}

          value={isLineNumbersDisplayed}

        />

        <Checkbox

          label="Highlight active line"

          onChange={(cbEvent) => settingsMap.setKey('isActiveLineHighlighted', cbEvent.target.checked)}

          value={isActiveLineHighlighted}

        />

        <Checkbox

          label="Highlight events in code"

          onChange={(cbEvent) => settingsMap.setKey('isPatternHighlightingEnabled', cbEvent.target.checked)}

          value={isPatternHighlightingEnabled}

        />

        <Checkbox

          label="Enable auto-completion"

          onChange={(cbEvent) => settingsMap.setKey('isAutoCompletionEnabled', cbEvent.target.checked)}

          value={isAutoCompletionEnabled}

        />

        <Checkbox

          label="Enable tooltips on Ctrl and hover"

          onChange={(cbEvent) => settingsMap.setKey('isTooltipEnabled', cbEvent.target.checked)}

          value={isTooltipEnabled}

        />

        <Checkbox

          label="Enable line wrapping"

          onChange={(cbEvent) => settingsMap.setKey('isLineWrappingEnabled', cbEvent.target.checked)}

          value={isLineWrappingEnabled}

        />

        <Checkbox

          label="Enable Tab indentation"

          onChange={(cbEvent) => settingsMap.setKey('isTabIndentationEnabled', cbEvent.target.checked)}

          value={isTabIndentationEnabled}

        />

        <Checkbox

          label="Enable Multi-Cursor (Cmd/Ctrl+Click)"

          onChange={(cbEvent) => settingsMap.setKey('isMultiCursorEnabled', cbEvent.target.checked)}

          value={isMultiCursorEnabled}

        />

        <Checkbox

          label="Enable flashing on evaluation"

          onChange={(cbEvent) => settingsMap.setKey('isFlashEnabled', cbEvent.target.checked)}

          value={isFlashEnabled}

        />

        <Checkbox

          label="Sync across Browser Tabs / Windows"

          onChange={(cbEvent) => {

            const newVal = cbEvent.target.checked;

            confirmDialog(RELOAD_MSG).then((r) => {

              if (r) {

                settingsMap.setKey('isSyncEnabled', newVal);

                window.location.reload();

              }

            });

          }}

          disabled={shouldAlwaysSync}

          value={isSyncEnabled}

        />

        <Checkbox

          label="Hide top buttons"

          onChange={(cbEvent) => settingsMap.setKey('isButtonRowHidden', cbEvent.target.checked)}

          value={isButtonRowHidden}

        />

        <Checkbox

          label="Disable CSS Animations"

          onChange={(cbEvent) => settingsMap.setKey('isCSSAnimationDisabled', cbEvent.target.checked)}

          value={isCSSAnimationDisabled}

        />

        <Checkbox

          label="Auto-start pattern on pattern change"

          onChange={(cbEvent) => settingsMap.setKey('patternAutoStart', cbEvent.target.checked)}

          value={patternAutoStart}

        />

      </FormItem>

      <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>

      <FormItem label="Reset Settings">

        <button

          className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50"

          onClick={() => {

            confirmDialog('Sure?').then((r) => {

              if (r) {

                const { userPatterns } = settingsMap.get(); // keep current patterns

                settingsMap.set({ ...defaultSettings, userPatterns });

              }

            });

          }}

        >

          restore default settings

        </button>

      </FormItem>

    </div>

  );

}