import React, { useState, useEffect } from 'react';
import {
  Dropdown, Button, Space
} from 'antd';
import { MenuOutlined, PlusOutlined } from '@ant-design/icons';

import AuthConsumer from '@/components/Authority';
import CreateFormModal from './CreateFormModal';
import UpdateFormModal from './UpdateFormModal';


import { categoryList, categoryAdd, categoryDelete } from '@/services/files/index';

// import services from '@/services/admin';

// const {
//   filesCategoryItems, filesCategoryItem, filesCategoryCreate,
//   filesCategoryDelete, filesCategoryUpdate
// } = services.FilesCategoryController;

export default ({ cid, setCid, setFilesCategoryItems }) => {
  const [filesCategoryItemsData, setFilesCategoryItemsData] = useState([]);

  const [createFormModal, setCreateFormModal] = useState(false);
  const [updateFormModal, setUpdateFormModal] = useState(false);

  const initRow = {
    id: '',
    name: ''
  }
  const [row, setRow] = useState(initRow);

  useEffect(() => {
    getFilesCategoryItems();
  }, []);

  const getFilesCategoryItems = () => {
    categoryList().then(({ data }) => {
      setFilesCategoryItemsData(data);
      setFilesCategoryItems(data);
    });
  }

  const handleCreate = async (fields) => {
    setRow(fields);

    const { success } = await categoryAdd({ ...fields });

    if (success) {
      setRow(initRow);
      setCreateFormModal(false);
      getFilesCategoryItems();
    }
  }
  const handleUpdate = async (fields) => {
    setRow(fields);

    const { success } = await categoryDelete({ ...fields });

    if (success) {
      setRow(initRow);
      setUpdateFormModal(false);
      getFilesCategoryItems();
    }
  }

  const handleAction = async (item) => {
    switch (item.key) {
      case 'create':

        setCreateFormModal(true);
        break;

      case 'update':
        setRow(item);
        setUpdateFormModal(true);
        break;

      case 'delete':
        // eslint-disable-next-line no-case-declarations
        const { success } = await filesCategoryDelete(item);
        if (success) {
          getFilesCategoryItems();
        }
        break;

      default:
        break;
    }
  }

  return (
    <>
      <UpdateFormModal
        values={row}
        modalOpenState={updateFormModal}
        onModalOpenState={setUpdateFormModal}
        onSubmit={handleUpdate}
      />
      <CreateFormModal
        values={row}
        modalOpenState={createFormModal}
        onModalOpenState={setCreateFormModal}
        onSubmit={handleCreate}
      />
      <Space
        direction="vertical"
        className={`w-28`}
      >
        <div
          className={`flex justify-between`}
        >
          <div
            className={`${!cid ? 'text-blue-500' : ''} cursor-pointer hover:text-blue-500`}
            onClick={() => {
              setCid(null)
            }}
            key={null}
          >全部文件</div>
          <div
            className={`cursor-pointer`}
          >
            <PlusOutlined onClick={() => {
              handleAction({ key: 'create', ...initRow })
            }} />
          </div>
        </div>
        {
          filesCategoryItemsData?.map(item =>
            <div
              key={item.id}
              className={`flex justify-between`}
            >
              <div
                className={`${cid === item.id ? 'text-blue-500' : ''}	cursor-pointer hover:text-blue-500`}
                onClick={() => {
                  setCid(item.id)
                }}
                key={null}
              >{item.name}</div>
              <div
                className={`cursor-pointer`}
              >
                <Dropdown menu={{
                  items: [
                    {
                      label: '编辑分类',
                      key: 'update',
                    },
                    {
                      label: '删除分类',
                      key: 'delete',
                    },
                  ],
                  onClick: ({ key }) => {
                    handleAction({ key, ...item })
                  }
                }}>
                  <MenuOutlined />
                </Dropdown>
              </div>
            </div>
          )
        }
      </Space>
    </>
  );
};

