import {useState, useEffect} from 'react';
import {
  showModal,
  chooseMedia,
  showLoading,
  hideLoading,
  showToast,
} from '@tarojs/taro';
import {useMutation, useQuery} from '@tanstack/react-query';
import {confirmDeliver, getInfo, uploadImg} from '@apis';
import {useBoolean} from 'ahooks';
import {useNavigate} from '@hooks';

export function useUpload() {
  const [files, setFiles] = useState([]);

  const {mutate} = useMutation({
    mutationFn: uploadImg,
    onMutate() {
      showLoading({title: '正在提交图片', mask: true});
    },
    onSettled() {
      hideLoading({noConflict: true});
    },
    onSuccess(data) {
      data.code === '200' && setFiles(prev => [...prev, data.data.data]);
    },
  });

  function onAdd() {
    chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      success(res) {
        const {tempFiles} = res;
        mutate(tempFiles[0].tempFilePath);
      },
    });
  }

  function onRemove(idx) {
    return function () {
      showModal({
        title: '删除图片',
        content: `你确定要删除第${idx + 1}张图片吗？`,
        success({confirm}) {
          confirm &&
            setFiles(function (prev) {
              const next = [...prev];
              next.splice(idx, 1);
              return next;
            });
        },
      });
    };
  }

  return [files, {onAdd, onRemove, setFiles}];
}

export function useAnomaly() {
  const [anomaly, {set: setAnomaly}] = useBoolean();
  const [note, setNote] = useState('');

  useEffect(
    function () {
      !anomaly && setNote('');
    },
    [anomaly],
  );

  return [
    {anomaly, note},
    {setAnomaly, setNote},
  ];
}

export function useSubmit({customerNo, truckNo, anomaly, note, imgs}) {
  const {pop} = useNavigate();
  const {mutate, isLoading} = useMutation({
    mutationFn: confirmDeliver,
    onSuccess({code}) {
      if (code === '200') {
        pop();
        showToast({title: '收货成功', icon: 'success', mask: true});
      }
    },
  });

  function onSubmit() {
    if (!customerNo || !truckNo) {
      return showToast({title: '请先扫码', icon: 'error'});
    }
    if (anomaly && !note) {
      return showToast({title: '请输入异常内容', icon: 'error'});
    }
    if (!imgs.length) {
      return showToast({title: '请上传图片', icon: 'error'});
    }

    const imgUrls = imgs.join(',');

    showModal({
      title: '确认收货',
      content: `你确认要对${truckNo}${customerNo}进行确认收货吗？`,
      success({confirm}) {
        confirm &&
          mutate({
            customer: customerNo,
            truckNo,
            anomaly: anomaly ? '1' : '0',
            note,
            imgs: imgUrls,
          });
      },
    });
  }

  return [isLoading, onSubmit];
}

export function useInfo(customerNo, truckNo, {setFiles, setAnomaly, setNote}) {
  const no = customerNo + truckNo;

  const {data} = useQuery({
    queryKey: [getInfo.name, no],
    enabled: Boolean(no),
    async queryFn() {
      showLoading({title: '正在获取发货单信息', mask: true});
      const data = await getInfo(truckNo, customerNo);
      hideLoading({noConflict: true});

      if (data.code === '200') {
        if (data.data.list.length) {
          return data.data.list[0];
        }

        return null;
      }

      return null;
    },
  });

  useEffect(
    function () {
      if (!data) {
        setFiles([]);
        setNote('');
        setAnomaly(false);
        return;
      }

      setFiles(data.imgs ? data.imgs.split(',') : []);
      setAnomaly(data.anomaly === '1');
      setNote(data?.note ?? '');
    },
    [data, setAnomaly, setFiles, setNote],
  );
}