import { Input } from "@/components/ui/input";
import { CellContext } from "@tanstack/react-table";
import { updateField } from "app/lib/update";
import { useState } from "react";
import { TableInputContainer } from "./inputContainer";


export default function NumberInputCell(props: CellContext<any, any>) {
  let initialValue = props.getValue()
  const [value, setValue] = useState(initialValue)
  const [isActive, setIsActive] = useState(false)

  const table = props.table.options.meta.tableName
  const id = props.row.original.id
  const column = props.column.id
  const pathname = props.table.options.meta.pathname

  function handleConfirm() {
    if (value === initialValue) {
      setIsActive(false)
      return
    }
    updateField({
      id,
      table,
      number: Number(value),
      column,
      pathname
    })
    initialValue = value
    setIsActive(false)
  }
  function handleExit() {
    setValue(initialValue)
    setIsActive(false)
  }

  return (
    <TableInputContainer isActive={isActive} setIsActive={setIsActive}>
      {isActive ?
        <Input type="number"
          onBlur={handleExit}
          value={value}
          autoFocus={true}
          onChange={e => setValue(e.target.value)}         // onBlur={handleClose}
          onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }}
          step={props.column.columnDef.meta.step}
        />
        : <p>{value}</p>
      }
    </TableInputContainer>
  )
}