import * as React from 'react'
import type { InputNumericProps } from '@planview/pv-uikit'
import { InputNumeric } from '@planview/pv-uikit'
import type { CellEditorParams, GridRowData } from '../types'
import { inputOverrides, useTextEditor } from '../utils/input'
import { EditorWrap } from './layout'
import styled from 'styled-components'
import type { IconProps } from '@planview/pv-icons'

const FluidInputNumeric = styled(InputNumeric)`
    ${inputOverrides}
`

export type GridEditorInputNumericProps<TDataModel extends GridRowData> =
    CellEditorParams<TDataModel> &
        Omit<
            InputNumericProps,
            | 'onChange'
            | 'onKeyDown'
            | 'value'
            | 'defaultValue'
            | 'password'
            | 'iconColor'
            | 'clearable'
            | 'onClear'
            | 'icon'
            | 'type'
            | 'readOnly'
            | 'selected'
            | 'focus'
            | 'disabled'
            | 'onBlur'
            | 'onFocus'
        > & {
            /** Input icon. Defaults to no icon. */
            icon?: React.ReactElement<IconProps> | null

            /**
             * Callback triggered after the value changes.
             **/
            onChange?: (value: string) => void

            /**
             * By default the editor will take the value from the cell, and manage all edits internally
             * to the editor. It will also update from the cell if a new value comes in during editing.
             *
             * If you want to customize this behavior, set this prop to true and provide an onChange
             * handler to take full control of value updates.
             */
            controlled?: boolean
        }

const cleanPropForSpread = (
    props: Partial<GridEditorInputNumericProps<GridRowData>>
) => {
    const { columnId, rowId, mode, label, ...rest } = props
    return rest
}

/**
 *
 * The [input numeric editor](https://design.planview.com/components/grid/grid-editors#input-numeric-editor) provides the underlying functionality for entering and formatting numeric data.
 * It is used to edit numeric values such as quantities, monetary values, percentages and similar types of data.
 *
 * `import { GridEditorInputNumeric } from '@planview/pv-grid'`
 *
 *
 */
export const GridEditorInputNumeric = <TDataModel extends GridRowData>({
    value,
    onCancel,
    onConfirm,
    onChange,
    controlled,
    icon = null,
    ...rest
}: GridEditorInputNumericProps<TDataModel>) => {
    const inputRef = React.useRef<HTMLInputElement>(null)
    const { val, onChangeHandler, onKeyDownHandler } = useTextEditor(
        inputRef,
        value,
        onConfirm,
        onCancel,
        onChange,
        controlled
    )
    return (
        <EditorWrap>
            <FluidInputNumeric
                {...cleanPropForSpread(rest)}
                type={undefined}
                ref={inputRef}
                selected
                value={val as string}
                onChange={onChangeHandler}
                onKeyDown={onKeyDownHandler}
                icon={icon}
            />
        </EditorWrap>
    )
}