import { Prec } from '@codemirror/state'
import { EditorView, keymap } from '@codemirror/view'
import { gotoLine } from '@codemirror/search'

/**
 * A custom extension that provides a keyboard shortcut
 * and panel with UI for jumping to a specific line number.
 */
export const goToLinePanel = () => {
  return [
    Prec.high(
      keymap.of([
        {
          key: 'Mod-Shift-l',
          preventDefault: true,
          run: gotoLine,
        },
      ])
    ),
    gotoLineTheme,
  ]
}

const gotoLineTheme = EditorView.baseTheme({
  '.cm-panel.cm-gotoLine': {
    padding: '10px',
    fontSize: '14px',
    '& label': {
      margin: 0,
      fontSize: '14px',
      '& .cm-textfield': {
        margin: '0 10px',
        maxWidth: '100px',
        height: '34px',
        padding: '5px 16px',
        fontSize: '14px',
        fontWeight: 'normal',
        lineHeight: 'var(--line-height-base)',
        color: 'var(--input-color)',
        backgroundColor: '#fff',
        backgroundImage: 'none',
        borderRadius: 'var(--input-border-radius)',
        boxShadow: 'inset 0 1px 1px rgb(0 0 0 / 8%)',
        transition:
          'border-color ease-in-out .15s, box-shadow ease-in-out .15s',
        '&:focus-visible': {
          outline: 'none',
        },
        '&:focus': {
          borderColor: 'var(--input-border-focus)',
        },
      },
    },
    '& .cm-button': {
      padding: '4px 16px 5px',
      textTransform: 'capitalize',
      fontSize: '14px',
      lineHeight: 'var(--line-height-base)',
      userSelect: 'none',
      backgroundImage: 'none',
      backgroundColor: 'var(--btn-default-bg)',
      borderRadius: 'var(--btn-border-radius-base)',
      border: '0 solid transparent',
      color: '#fff',
    },
  },
})