import {Button, Card, Space} from 'antd';
import {FC, useMemo} from 'react';
import css from './index.module.css';
import {FormField, FormSelect} from '@components';
import {useFormState} from './hooks';
import {useDictionaryWidthCode, useMaterialOptions, useStorageOptions} from '@hooks';

const OtherStockOut: FC = function () {
  const [{control, isLoading}, {onSubmit, onReset, watch}] = useFormState();
  const {data: materialOptions, isFetching} = useMaterialOptions();
  const [{data: warehouseOptions, isFetching: isWarehouseFetching}] = useDictionaryWidthCode(
    '仓库',
    {enabled: true},
  );
  const halfWarehouseOptions = useMemo(
    function () {
      return warehouseOptions.filter(val => val.type === '1');
    },
    [warehouseOptions],
  );
  const warehouseId = watch('warehouse');
  const {data: locationOptions, isFetching: isLocationFetching} = useStorageOptions(
    false,
    state => state.storageLocationCode,
    {
      id: warehouseId,
    },
  );
  const [{data: corporationOptions, isFetching: isCorporationFetching}] = useDictionaryWidthCode(
    '公司',
    {enabled: true, findValue: state => state.code},
  );

  return (
    <section className='content-main ant-card-title-reset'>
      <Card title='半成品其他出库'>
        <form className={css.form} onSubmit={onSubmit} onReset={onReset}>
          <Space direction='vertical' className='width-full'>
            <FormSelect
              loading={isFetching}
              options={materialOptions}
              control={control}
              label='出库物料'
              name='wllbCode'
              showSearch
              placeholder='请输入物料编号'
            />
            <FormSelect
              loading={isWarehouseFetching}
              options={halfWarehouseOptions}
              control={control}
              label='所属仓库'
              name='warehouse'
              showSearch
            />
            <FormSelect
              loading={isLocationFetching}
              options={locationOptions}
              control={control}
              label='所属库位'
              name='storageLocationCode'
              showSearch
            />{' '}
            <FormSelect
              loading={isCorporationFetching}
              options={corporationOptions}
              control={control}
              label='所属公司'
              name='accountSleeve'
            />
            <FormField control={control} name='wbs' label='WBS编号' />
            <FormField control={control} name='num' label='出库数量' type='number' />
            <Space className='width-full' style={{justifyContent: 'flex-end'}}>
              <Button htmlType='reset' disabled={isLoading}>
                重置
              </Button>
              <Button htmlType='submit' type='primary' loading={isLoading}>
                确认出库
              </Button>
            </Space>
          </Space>
        </form>
      </Card>
    </section>
  );
};

export default OtherStockOut;