import {useContextSection, useQueryTableList} from '@hooks';
import {context, pageContext, searchContext} from '../context';
import {deleteContainer, getContainerList} from '@apis';
import {ContainerListData} from '@models';
import {ColumnsType} from 'antd/es/table';
import {Button, message} from 'antd';
import {useMutation} from '@tanstack/react-query';
import {useState} from 'react';
import {deleteConfirm} from '@utils';
import {useBoolean} from 'ahooks';

export function useList() {
  const params = useContextSection(
    context,
    function([{name, department, type}]) {
      return {containerName: name, department, type};
    },
  );

  return useQueryTableList({
    queryFn: getContainerList,
    params,
    pageContext,
    searchContext,
  });
}

function usePut() {
  const [putVisible, {setFalse: putVisibleClose, setTrue: putVisibleOpen}] = useBoolean();
  const [editId, setEditId] = useState('');
  function onAdd() {
    putVisibleOpen();
    setEditId('');
  }
  function onEdit(id: string) {
    return function() {
      setEditId(id);
      putVisibleOpen();
    };
  }

  return [{putVisible, editId}, {onPutClose: putVisibleClose, onAdd, onEdit}] as const;
}

function useDelete(refetch: () => void) {
  const [pendingId, setPendingId] = useState('');
  const {mutate} = useMutation(
    deleteContainer,
    {
      onSuccess(data) {
        setPendingId('');

        if (data.msg === '200') {
          message.success('删除成功');
          refetch();
        }
      },
    },
  );
  function onDelete(id: string) {
    return function() {
      deleteConfirm(
        '容器',
        function() {
          setPendingId(id);
          mutate(id);
        },
      );
    };
  }

  return [pendingId, onDelete] as const;
}

function useScrap() {
  const [id, setId] = useState('');
  const [visible, {setTrue, setFalse}] = useBoolean();

  function onScrapClose() {
    setFalse();
    setId('');
  }

  function onScrap(id: string) {
    return function() {
      setId(id);
      setTrue();
    };
  }

  return [{scrapVisible: visible, scrapId: id}, {onScrapClose, onScrap}] as const;
}

function useScrapLog() {
  const [id, setId] = useState('');
  const [visible, {setTrue, setFalse}] = useBoolean();

  function onLogClose() {
    setFalse();
    setId('');
  }

  function onLog(id: string) {
    return function() {
      setId(id);
      setTrue();
    };
  }

  return [{logVisible: visible, logId: id}, {onLogClose, onLog}] as const;
}

export function useHandle(refetch: () => void) {
  const [{editId, putVisible}, {onPutClose, onAdd, onEdit}] = usePut();
  const [pendingId, onDelete] = useDelete(refetch);
  const [{scrapId, scrapVisible}, {onScrap, onScrapClose}] = useScrap();
  const [{logVisible, logId}, {onLogClose, onLog}] = useScrapLog();

  const columns: ColumnsType<ContainerListData> = [
    {title: '部门', dataIndex: 'department', key: 'department'},
    {title: '类别', dataIndex: 'type', key: 'type'},
    {title: '容器名称', dataIndex: 'containerName', key: 'containerName'},
    {title: '数量', dataIndex: 'num', key: 'num'},
    {title: '创建时间', dataIndex: 'createTime', key: 'createTime'},
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      width: 330,
      render(_, {id}) {
        return (
          <>
            <Button
              type='link'
              disabled={pendingId === id}
              onClick={onEdit(id)}
            >
              修改
            </Button>
            <Button
              type='text'
              danger
              loading={pendingId === id}
              onClick={onDelete(id)}
            >
              删除
            </Button>
            <Button
              type='text'
              className='ant-text-btn-color-cyan'
              disabled={pendingId === id}
              onClick={onScrap(id)}
            >
              报废
            </Button>
            <Button
              type='text'
              disabled={pendingId === id}
              onClick={onLog(id)}
            >
              报废记录
            </Button>
          </>
        );
      },
    },
  ];

  return [
    {columns, putVisible, editId, scrapId, scrapVisible, logVisible, logId},
    {onPutClose, onAdd, onScrapClose, onLogClose},
  ] as const;
}
