import { Modal, Input, Button, InputNumber } from 'antd'
import { useState, useEffect } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'

export function NewPcsCell({
  value,
  onChange,
  item,
  readOnly
}: {
  value?: number
  onChange?: (v: number | null) => void
  item: any
  readOnly: boolean
}) {
  const beforePcs = item?.pcs ?? ''
  const afterPcs = value ?? item?.newPcs ?? ''
  const isInconsistent = String(afterPcs) !== String(beforePcs)
  return (
    <InputNumber
      min={0}
      placeholder='非负整数'
      className={classNames(isInconsistent && styles.newPcsInconsistent)}
      style={{ width: '100%' }}
      value={value}
      onChange={onChange}
      disabled={readOnly}
    />
  )
}

export function PdRemarkCell({
  value,
  onChange,
  item,
  readOnly,
  onOpen
}: {
  value?: string
  onChange?: (v: string) => void
  item: any
  readOnly: boolean
  onOpen: (val: string, onChange: (v: string) => void) => void
}) {
  const val = value ?? item?.pdRemark ?? ''
  const displayTxt = readOnly ? '查看' : '填写'
  return (
    <div>
      <input type='hidden' value={val} onChange={e => onChange?.(e.target.value)} />

      {!val && readOnly ? (
        '（空）'
      ) : (
        <Button type='text' size='small' onClick={() => item && onOpen(val, v => onChange?.(v))}>
          {displayTxt}
        </Button>
      )}
    </div>
  )
}

export function PdRemarkModal({
  open,
  value,
  readOnly,
  onOk,
  onCancel
}: {
  open: boolean
  value: string
  readOnly: boolean
  onOk: (val: string) => void
  onCancel: () => void
}) {
  const [inputVal, setInputVal] = useState('')
  useEffect(() => {
    if (open) setInputVal(value)
  }, [open, value])
  return (
    <Modal
      title='盘点备注'
      open={open}
      onOk={() => onOk(inputVal)}
      onCancel={onCancel}
      destroyOnClose
      footer={
        readOnly
          ? null
          : [
              <Button key='cancel' onClick={onCancel}>
                取消
              </Button>,
              <Button key='ok' type='primary' onClick={() => onOk(inputVal)}>
                确定
              </Button>
            ]
      }
    >
      <Input.TextArea
        value={inputVal}
        disabled={readOnly}
        onChange={e => setInputVal(e.target.value)}
        placeholder='请填写内容'
        maxLength={500}
        rows={4}
        showCount
        style={{ marginBottom: 20 }}
      />
    </Modal>
  )
}
