import {Modal, ModalField, ModalTextArea} from '@components';
import {FC} from 'react';
import {useFormState} from './hooks';

type Props = {
  id: string;
  onClose: () => void;
  onFetch: () => void;
  visible: boolean;
};

const ScrapModal: FC<Props> = function ({id, onClose, onFetch, visible}) {
  const [{isLoading, control}, onSubmit] = useFormState({
    visible,
    id,
    onClose,
    onFetch,
  });

  return (
    <Modal
      visible={visible}
      onClose={onClose}
      title='容器报废'
      isLoading={isLoading}
      onSubmit={onSubmit}
      testId='container_scrap_modal'
    >
      <ModalField
        control={control}
        name='scrapNum'
        type='number'
        label='报废数量'
      />
      <ModalTextArea
        control={control}
        name='scrapNote'
        label='报废原因'
        width='300px'
        height='100px'
      />
    </Modal>
  );
};

export default ScrapModal;
