import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _isEmpty from "lodash/isEmpty";
import React, { useEffect, useState } from 'react';
import { connect } from "../../redux";
import { get } from 'dot-prop-immutable';
import styled from 'styled-components';
import { AssetsType } from "../../../utils/folder";
import { AssetsTypeGroup } from "../../../utils/resource";
import { Cascader } from '@whalecloud/fdx';
import OlineImage from "../OlineImage";
var ResGroupDiv = /*#__PURE__*/styled('div', {
  target: "edip2mk0",
  label: "ResGroupDiv"
})({
  display: 'flex',
  justifyContent: 'flex-start',
  flexWrap: 'wrap',
  marginTop: 10,
  '.resource': {
    padding: 10,
    border: '1px solid #fff',
    '&:hover': {
      border: '1px solid var(--cms-theme-primary)'
    }
  },
  '.select': {
    border: '1px solid var(--cms-theme-primary)'
  },
  '.image': {
    width: 100,
    height: 100,
    img: {
      width: '100%',
      height: '100%',
      objectFit: 'contain'
    }
  },
  '.doc': {
    width: '100%',
    padding: '4px',
    '.anticon': {
      paddingRight: '6px'
    }
  },
  '.video': {
    width: '50%'
  }
});
var DEFAULT_PATH = '/';

var getFolderTree = function getFolderTree(folderList) {
  var parentList = folderList.filter(function (it) {
    return !it.parentPath || it.parentPath.length <= DEFAULT_PATH.length;
  }) || [];

  var getChildren = function getChildren(parentPath) {
    var children = folderList.filter(function (it) {
      return it.parentPath === parentPath;
    }) || [];

    if (children.length > 0) {
      return children.map(function (it) {
        return _objectSpread(_objectSpread({}, it), {}, {
          label: it.name,
          value: it.path,
          children: getChildren(it.path)
        });
      }); // eslint-disable-next-line no-else-return
    } else {
      return children || [];
    }
  };

  var folderTree = parentList.map(function (item) {
    return _objectSpread(_objectSpread({}, item), {}, {
      label: item.name,
      value: item.path,
      children: getChildren(item.path)
    });
  });
  return folderTree;
};

function ResourceGroup(props) {
  // 声明一个新的叫做 “count” 的 state 变量
  var queryAllFolder = props.queryAllFolder,
      queryAssetsByPathAndType = props.queryAssetsByPathAndType,
      onClick = props.onClick,
      type = props.type;

  var _useState = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
      allFolderTree = _useState2[0],
      setAllFolderTree = _useState2[1]; // 文件夹


  var _useState3 = useState(DEFAULT_PATH),
      _useState4 = _slicedToArray(_useState3, 2),
      selFolderPath = _useState4[0],
      setSelFolderPath = _useState4[1]; // 选择的文件夹


  var _useState5 = useState([]),
      _useState6 = _slicedToArray(_useState5, 2),
      assetsList = _useState6[0],
      setAssetsList = _useState6[1]; // 资源列表


  var _useState7 = useState(),
      _useState8 = _slicedToArray(_useState7, 2),
      selAsset = _useState8[0],
      setSelAsset = _useState8[1]; // 选择的资源
  // 获取所有 folder 信息


  var getAllFolder = function getAllFolder() {
    var params = {
      path: DEFAULT_PATH,
      data: {
        fileType: AssetsType
      }
    };
    queryAllFolder(params).then(function (res) {
      if (_isEmpty(res)) {
        return;
      }

      setAllFolderTree(getFolderTree(res));
    });
  }; // 查询资源数据


  var getAssetsGroup = function getAssetsGroup() {
    var params = {
      path: selFolderPath,
      data: {
        fileType: AssetsType,
        type: type
      }
    };
    queryAssetsByPathAndType(params).then(function (res) {
      setAssetsList(res || []);
    });
  }; // 获取数据


  useEffect(function () {
    getAllFolder();
  }, []);
  useEffect(function () {
    if (type === 'icon') {
      return;
    }

    getAssetsGroup();
  }, [selFolderPath, type]);

  var handleChange = function handleChange(value) {
    setSelFolderPath(value[value.length - 1]);
  };

  var handleAssetsClick = function handleAssetsClick(value) {
    setSelAsset(value);
    onClick(value);
  };

  var getClass = function getClass() {
    if (type === AssetsTypeGroup.IMAGE || type === AssetsTypeGroup.SVG) {
      return 'image';
    }

    if (type === AssetsTypeGroup.MULTIMEDIA) {
      return 'video';
    }

    return 'doc';
  };

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Cascader, {
    options: allFolderTree,
    onChange: handleChange,
    allowClear: true,
    changeOnSelect: true,
    placeholder: "Please select",
    style: {
      width: '100%'
    }
  }), /*#__PURE__*/React.createElement(ResGroupDiv, {
    className: "imageGroup"
  }, assetsList.map(function (asset) {
    return /*#__PURE__*/React.createElement("div", {
      className: "resource ".concat(getClass(), " ").concat(get(selAsset, 'path') === asset.path && 'select', " "),
      key: asset.path,
      onClick: function onClick() {
        return handleAssetsClick(asset);
      }
    }, type === AssetsTypeGroup.IMAGE && /*#__PURE__*/React.createElement(OlineImage, Object.assign({
      imageInfo: asset
    }, props)));
  })));
}

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    queryAllFolder: function queryAllFolder(payload) {
      return dispatch({
        type: 'cmsFolder/queryAllFolder',
        payload: payload
      });
    },
    queryAssetsByPathAndType: function queryAssetsByPathAndType(payload) {
      return dispatch({
        type: 'cmsAssets/queryAssetsByPathAndType',
        payload: payload
      });
    }
  };
};

export default connect(null, mapDispatchToProps)(ResourceGroup);
//# sourceMappingURL=index.js.map