import {View, Image, Text} from '@tarojs/components';
import icon from '@assets/goods/complate.svg';
import {TextGroup} from '@components';
import {useScanOrder} from '@hooks';
import {Button} from '@antmjs/vantui';
import {useAnomaly, useInfo, useSubmit, useUpload} from './hooks';
import Upload from './upload';
import Exception from './exception';
import {BTN_LOADING_SIZE} from '@utils';

export default function Receive() {
  const [{goodsList, customerNo, truckNo}, onScan] = useScanOrder();
  const [files, {onRemove, onAdd, setFiles}] = useUpload();
  const [{anomaly, note}, {setAnomaly, setNote}] = useAnomaly();
  const [isLoading, onSubmit] = useSubmit({
    customerNo,
    truckNo,
    anomaly,
    note,
    imgs: files,
  });
  useInfo(customerNo, truckNo, {setFiles, setAnomaly, setNote});

  return (
    <View className='h-screen overflow-auto bg-gray-100 flex flex-col'>
      <View className='py-4 bg-white'>
        <Image src={icon} mode='widthFix' className='w-14 mx-auto' />

        <Text className='px-3 text-center mt-2 block text-lg font-semibold text-[#333]'>
          确认收货单
        </Text>
      </View>

      <View className='mt-px bg-white px-4 py-2'>
        <TextGroup title='卡车号' content={truckNo} />
        <TextGroup title='客户号' content={customerNo} />
      </View>

      {goodsList.length > 0 ? (
        <View className='mt-px bg-white p-4'>
          <Text className='text-lg font-semibold'>货品信息</Text>

          <View className='mt-3'>
            {goodsList.map(function ({no, num}) {
              return (
                <View
                  key={no}
                  className='border-0 border-b border-dashed border-gray-100 last:border-none'
                >
                  <TextGroup title='品号' content={no} />
                  <TextGroup title='数量' content={num} />
                </View>
              );
            })}
          </View>
        </View>
      ) : null}

      <View className='mt-3 bg-white px-4 py-2'>
        <Upload files={files} onDelete={onRemove} onAdd={onAdd} />
      </View>

      <View className='mt-3 bg-white px-4 py-2 mb-10'>
        <Exception
          checked={anomaly}
          onChange={setAnomaly}
          note={note}
          onNoteChange={setNote}
        />
      </View>

      <View className='flex mt-auto justify-around pb-12'>
        <Button disabled={isLoading} className='w-36' onClick={onScan} round>
          扫码
        </Button>
        <Button
          type='primary'
          className='w-36'
          color='#58C6EA'
          round
          onClick={onSubmit}
          loading={isLoading}
          loadingSize={BTN_LOADING_SIZE}
        >
          确认收货
        </Button>
      </View>
    </View>
  );
}