var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import useKey from 'react-use/lib/useKey';
import classNames from 'classnames';
import { Grid } from 'react-virtualized';
import useMeasure from 'react-use/lib/useMeasure';
import useDataValue from "../../hooks/useDataValue";
import useStaticCallback from "../../hooks/useStaticCallback";
import { createScrollbar } from "../scrollbar";
import { Icon } from "../icon";
import "./style/index.css";
import { useCallback } from 'react';
import { IconButton } from "../button";
import { Tooltip } from "../tooltip";
export var PreviewType;

(function (PreviewType) {
  PreviewType["normal"] = "normal";
  PreviewType["fullscreen"] = "fullscreen";
})(PreviewType || (PreviewType = {}));

export var PreviewTheme;

(function (PreviewTheme) {
  PreviewTheme["initial"] = "initial"; // 全屏主题

  PreviewTheme["defaultFull"] = "default-full";
  PreviewTheme["blackFull"] = "black-full";
})(PreviewTheme || (PreviewTheme = {}));

export var PreviewLisMode;

(function (PreviewLisMode) {
  PreviewLisMode["media"] = "media";
  PreviewLisMode["other"] = "other";
})(PreviewLisMode || (PreviewLisMode = {}));

var prefixCls = 'dmc-preview-list';
var scrollbarOpts = {
  suppressScrollY: true,
  minScrollbarLength: 20
};

var PreviewList = function PreviewList(props) {
  var _a;

  var _b;

  var list = props.list,
      _c = props.mode,
      mode = _c === void 0 ? PreviewLisMode.other : _c,
      selectIndex = props.selectIndex,
      defaultSelectIndex = props.defaultSelectIndex,
      className = props.className,
      RenderCell = props.RenderCell,
      RenderPreview = props.RenderPreview,
      onChangeSelect = props.onChangeSelect,
      type = props.type,
      showList = props.showList,
      showEdit = props.showEdit,
      showShare = props.showShare,
      title = props.title,
      _d = props.theme,
      theme = _d === void 0 ? PreviewTheme.initial : _d,
      handleClose = props.handleClose,
      handleEdit = props.handleEdit,
      handleShare = props.handleShare,
      _e = props.shareTip,
      shareTip = _e === void 0 ? '' : _e,
      renderAction = props.renderAction,
      restProps = __rest(props, ["list", "mode", "selectIndex", "defaultSelectIndex", "className", "RenderCell", "RenderPreview", "onChangeSelect", "type", "showList", "showEdit", "showShare", "title", "theme", "handleClose", "handleEdit", "handleShare", "shareTip", "renderAction"]);

  var _f = useMeasure(),
      ref = _f[0],
      width = _f[1].width;

  var listLen = list.length;
  var gridRef = React.useRef(null);
  var psRef = React.useRef();

  var _g = React.useState(defaultSelectIndex !== null && defaultSelectIndex !== void 0 ? defaultSelectIndex : 0),
      unControlVal = _g[0],
      setUnControlVal = _g[1];

  var isControl = ('selectIndex' in props);
  var val = isControl ? selectIndex !== null && selectIndex !== void 0 ? selectIndex : 0 : unControlVal;
  var itemCls = prefixCls + "-item";
  var itemInnerCls = prefixCls + "-item-inner";
  var itemSelectCls = prefixCls + "-item-active";

  var _title = title || ((_b = list === null || list === void 0 ? void 0 : list[val]) === null || _b === void 0 ? void 0 : _b.name);

  var clickItem = useDataValue(function (valStr) {
    var index = parseInt(valStr);
    !isControl && setUnControlVal(index);
    onChangeSelect && onChangeSelect(index);
  });
  var clickPreNav = useStaticCallback(function () {
    var index = val - 1;
    !isControl && setUnControlVal(index);
    onChangeSelect && onChangeSelect(index);
  });
  var clickNextNav = useStaticCallback(function () {
    var index = val + 1;
    !isControl && setUnControlVal(index);
    onChangeSelect && onChangeSelect(index);
  });
  var clickKey = useStaticCallback(function (event) {
    var index = val;

    if (event.key === 'ArrowLeft' && val > 0) {
      index = val - 1;
    } else if (event.key === 'ArrowRight' && val < listLen - 1) {
      index = val + 1;
    }

    if (index !== val) {
      !isControl && setUnControlVal(index);
      onChangeSelect && onChangeSelect(index);
    }
  });
  var keyFilter = useCallback(function (event) {
    return event.key === 'ArrowRight' || event.key === 'ArrowLeft';
  }, []);
  useKey(keyFilter, clickKey, undefined, [clickKey]);

  var cellRenderer = function cellRenderer(_a) {
    var _b;

    var isVisible = _a.isVisible,
        columnIndex = _a.columnIndex,
        style = _a.style;

    if (!isVisible || columnIndex >= listLen) {
      return null;
    }

    var data = list[columnIndex];
    var cls = classNames(itemCls, (_b = {}, _b[itemSelectCls] = columnIndex === val, _b));
    return _jsx("div", __assign({
      style: style,
      className: cls
    }, {
      children: _jsx("div", __assign({
        "data-value": columnIndex,
        className: itemInnerCls,
        onClick: clickItem
      }, {
        children: _jsx(RenderCell, {
          item: data
        }, void 0)
      }), void 0)
    }), columnIndex);
  };

  React.useEffect(function () {
    var dom = ReactDOM.findDOMNode(gridRef.current);

    if (dom) {
      var _a = createScrollbar(dom, 'assist-bg', scrollbarOpts),
          ps = _a[0],
          destroy_1 = _a[1];

      psRef.current = ps;
      return function () {
        destroy_1();
        psRef.current = undefined;
      };
    }
  }, []);
  React.useEffect(function () {
    psRef.current && psRef.current.update();
  });
  return _jsxs("div", __assign({}, restProps, {
    className: classNames(prefixCls, className, prefixCls + "-" + theme, (_a = {}, _a[prefixCls + "-fullscreen"] = type === PreviewType.fullscreen, _a)),
    ref: ref
  }, {
    children: [_jsxs("div", __assign({
      className: prefixCls + "-preview"
    }, {
      children: [type === PreviewType.fullscreen && _jsxs("div", __assign({
        className: prefixCls + "-head " + prefixCls + "-head-" + theme
      }, {
        children: [_jsxs("div", __assign({
          className: "name"
        }, {
          children: [_jsx("div", {
            children: _title
          }, void 0), showShare && _jsx(Tooltip, __assign({
            title: shareTip
          }, {
            children: _jsx(IconButton, {
              type: "only-icon",
              icon: "launch-2",
              onClick: function onClick() {
                handleShare && handleShare();
              }
            }, void 0)
          }), void 0)]
        }), void 0), _jsxs("div", __assign({
          className: prefixCls + "-action"
        }, {
          children: [renderAction && renderAction(val), !renderAction && showEdit && _jsx(IconButton, {
            type: "only-icon",
            icon: "edit",
            onClick: function onClick() {
              var _a;

              if (handleEdit === null || handleEdit === void 0 ? void 0 : handleEdit.length) {
                if (mode === PreviewLisMode.media && list[val].type === 'image') {
                  (_a = handleEdit[1]) === null || _a === void 0 ? void 0 : _a.call(handleEdit);
                } else {
                  handleEdit[0]();
                }
              }

              handleClose && handleClose();
            }
          }, void 0), _jsx(IconButton, {
            type: "only-icon",
            icon: "close",
            onClick: function onClick() {
              return handleClose && handleClose();
            }
          }, void 0)]
        }), void 0)]
      }), void 0), type === PreviewType.fullscreen ? _jsxs("div", __assign({
        className: prefixCls + "-preview-container"
      }, {
        children: [_jsx("div", {
          children: val !== 0 && _jsx("div", __assign({
            className: prefixCls + "-nav " + prefixCls + "-left-nav",
            onClick: clickPreNav
          }, {
            children: _jsx(Icon, {
              icon: "chevron-left"
            }, void 0)
          }), void 0)
        }, void 0), _jsx("div", __assign({
          className: "content"
        }, {
          children: _jsx(RenderPreview, {
            item: list[val],
            handleClose: handleClose
          }, void 0)
        }), void 0), _jsx("div", {
          children: val < listLen - 1 && _jsx("div", __assign({
            className: prefixCls + "-nav " + prefixCls + "-right-nav",
            onClick: clickNextNav
          }, {
            children: _jsx(Icon, {
              icon: "chevron-right"
            }, void 0)
          }), void 0)
        }, void 0)]
      }), void 0) : _jsxs(_Fragment, {
        children: [_jsx("div", __assign({
          className: prefixCls + "-preview-container"
        }, {
          children: _jsx(RenderPreview, {
            item: list[val],
            handleClose: handleClose
          }, void 0)
        }), void 0), val !== 0 && _jsx("div", __assign({
          className: prefixCls + "-nav " + prefixCls + "-left-nav",
          onClick: clickPreNav
        }, {
          children: _jsx(Icon, {
            icon: "chevron-left"
          }, void 0)
        }), void 0), val < listLen - 1 && _jsx("div", __assign({
          className: prefixCls + "-nav " + prefixCls + "-right-nav",
          onClick: clickNextNav
        }, {
          children: _jsx(Icon, {
            icon: "chevron-right"
          }, void 0)
        }), void 0)]
      }, void 0)]
    }), void 0), showList && _jsx(Grid, {
      ref: gridRef,
      width: width,
      height: 78,
      rowHeight: 64,
      rowCount: 1,
      cellRenderer: cellRenderer,
      columnWidth: 116,
      columnCount: listLen,
      scrollToColumn: val,
      className: prefixCls + "-list"
    }, void 0)]
  }), void 0);
};

PreviewList.defaultProps = {
  type: PreviewType.normal,
  showList: true,
  showEdit: false,
  showShare: false,
  title: '',
  shareTip: ''
};
export default PreviewList;

