import {Card, Space} from 'antd';
import {FC} from 'react';
import {useParams} from 'react-router-dom';
import {useFormState} from './hooks';
import Field from './field';
import {ModalBtnGroup} from '@components';
import Select from './select';
import {useDictionaryOptions, useStorageOptions} from '@hooks';

const StockOperation: FC = function() {
  const {type} = useParams<{type: 'in' | 'out'}>();
  const [{control, isLoading}, {onSubmit}] = useFormState();
  const options = useDictionaryOptions(
    '物料字典',
    false,
    state => state.code,
  );
  const locationOptions = useStorageOptions(
    false,
    state => state.storageLocationCode,
  );

  return (
    <section className='content-main'>
      <Card title={type === 'in' ? '其他入库' : '其他出库'}>
        <form onSubmit={onSubmit}>
          <Space direction='vertical'>
            <Select
              control={control}
              label='物料'
              name='materialCode'
              data={options}
            />
            <Select
              control={control}
              label='所在库位'
              name='locationCode'
              data={locationOptions}
            />
            <Field
              control={control}
              label={type === 'in' ? '入库数量' : '出库数量'}
              name='operationNum'
              type='number'
            />
            <Field
              control={control}
              label='wbs编号'
              name='wbsCode'
              required={false}
            />
            <ModalBtnGroup isLoading={isLoading} />
          </Space>
        </form>
      </Card>
    </section>
  );
};

export default StockOperation;