import {Image, Text, View, Picker} from '@tarojs/components';
import icon from '@assets/goods/sending.svg';
import {Button} from '@antmjs/vantui';
import {TextGroup as Item, Upload} from '@components';
import {useSubmit} from './hooks';
import dayjs from 'dayjs';
import {useScanOrder, useUpload} from '@hooks';
import {BTN_LOADING_SIZE} from '@utils';

export default function DeliverGoods() {
  const [
    {goodsList, customerNo, truckNo, date},
    {onScan, setDate: onDateChange},
  ] = useScanOrder();
  const [files, {onAdd, onRemove}] = useUpload();
  const [isLoading, onSubmit] = useSubmit({
    goodsList,
    customerNo,
    truckNo,
    date,
    files,
  });

  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'>
        <Item title='卡车号' content={truckNo} />
        <Item title='客户号' content={customerNo} />
        <Picker
          mode='date'
          value={date}
          onChange={onDateChange}
          start={dayjs().format('YYYY-MM-DD')}
        >
          <Item title='到货时间' content={date} />
        </Picker>
      </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'
                >
                  <Item title='品号' content={no} />
                  <Item title='数量' content={num} />
                </View>
              );
            })}
          </View>
        </View>
      ) : null}

      <Upload files={files} onAdd={onAdd} onDelete={onRemove} />

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