import React, { useState, type FC } from 'react';
import { Button } from '../Button/Button';

export const GotoPageInput: FC<{
  count?: number;
  onGoto?: (v: number) => void;
  disabled?: boolean;
}> = ({ count = 0, onGoto }) => {
  const [val, setVal] = useState('');
  const n = parseInt(val);
  const disabled = !Number.isFinite(n) || n < 1 || n > count;

  const goto = () => {
    if (disabled) {
      return;
    }
    onGoto?.(n - 1);
  };
  return (
    <div className={'flex items-center gap-1.5 text-xs'}>
      <Button className={'btn-ghost btn-xs'} disabled={disabled} onClick={goto}>
        前往
      </Button>
      <input
        type='number'
        className={'input input-xs input-bordered w-[8ch]'}
        value={val}
        onKeyUp={(e) => {
          if (e.code === 'Enter') {
            e.preventDefault();
            goto();
          }
        }}
        onChange={(e) => {
          setVal(e.currentTarget.value);
        }}
      />
      <span>页</span>
    </div>
  );
};