import * as React from 'react'
import type { CellEditorParams, GridRowData } from '../types'
import { useClickOutside, useEscapeListener } from '@planview/pv-utilities'
import { css } from 'styled-components'

export const inputOverrides = css`
    flex: 1 1 auto;
    border-radius: 0;
    height: 100%;
`

const noop = () => {}

export const useTextEditor = <TDataModel extends GridRowData>(
    inputRef: React.RefObject<HTMLInputElement | null>,
    value: unknown,
    onConfirm: CellEditorParams<TDataModel>['onConfirm'],
    onCancel: CellEditorParams<TDataModel>['onCancel'],
    onChange: (val: string) => void = noop,
    controlled = false
) => {
    const [innerValue, setInnerVal] = React.useState(value as string)

    const val = controlled ? value : innerValue

    React.useEffect(() => {
        if (!controlled) {
            setInnerVal(value as string)
        }
    }, [value, controlled])

    const onChangeHandler = React.useCallback(
        (newValue: string) => {
            onChange(newValue)
            if (!controlled) {
                setInnerVal(newValue)
            }
        },
        [controlled, onChange]
    )

    const onClickOutside = React.useCallback(() => {
        onConfirm(val)
    }, [onConfirm, val])

    const handleEscape = React.useCallback(() => {
        onCancel?.()
    }, [onCancel])

    useEscapeListener({
        onEscape: handleEscape,
        stack: true,
    })

    const onKeyDownHandler: React.KeyboardEventHandler<HTMLInputElement> =
        React.useCallback(
            (ev) => {
                switch (ev.key) {
                    case 'Tab':
                        ev.preventDefault()
                        onConfirm(val, {
                            continueEditing: ev.shiftKey ? 'previous' : 'next',
                        })
                        break
                    case 'Enter':
                        ev.stopPropagation()
                        onConfirm(val)
                        break
                    default:
                        break
                }
            },
            [onConfirm, val]
        )

    useClickOutside(inputRef, onClickOutside)

    return {
        val,
        onChangeHandler,
        onKeyDownHandler,
    }
}