"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.PageHeaderSkeleton = exports.MediaQueryKeyEnum = exports.ListToolbarSkeleton = exports.ListSkeletonItem = exports.ListSkeleton = exports.Line = void 0;
var _react = _interopRequireDefault(require("react"));
var _useMediaAntdQuery = _interopRequireDefault(require("use-media-antd-query"));
var _skeleton = _interopRequireDefault(require("../skeleton"));
var _card = _interopRequireDefault(require("../card"));
var _space = _interopRequireDefault(require("../space"));
var _divider = _interopRequireDefault(require("../divider"));
var _jsxRuntime = require("react/jsx-runtime");
/** 一条分割线 */
const Line = ({
  padding
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
  style: {
    padding: padding || '0 24px'
  },
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider.default, {
    style: {
      margin: 0
    }
  })
});
exports.Line = Line;
const MediaQueryKeyEnum = {
  xs: 2,
  sm: 2,
  md: 4,
  lg: 4,
  xl: 6,
  xxl: 6
};
exports.MediaQueryKeyEnum = MediaQueryKeyEnum;
const StatisticSkeleton = ({
  size,
  active
}) => {
  const colSize = (0, _useMediaAntdQuery.default)();
  const arraySize = size === undefined ? MediaQueryKeyEnum[colSize] || 6 : size;
  const firstWidth = index => {
    if (index === 0) {
      return 0;
    }
    if (arraySize > 2) {
      return 42;
    }
    return 16;
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.default, {
    bordered: false,
    style: {
      marginBottom: 16
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: {
        width: '100%',
        justifyContent: 'space-between',
        display: 'flex'
      },
      children: new Array(arraySize).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        style: {
          borderLeft: arraySize > 2 && index === 1 ? '1px solid rgba(0,0,0,0.06)' : undefined,
          paddingLeft: firstWidth(index),
          flex: 1,
          marginRight: index === 0 ? 16 : 0
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
          active: active,
          paragraph: false,
          title: {
            width: 100,
            style: {
              marginTop: 0
            }
          }
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default.Button, {
          active: active,
          style: {
            height: 48
          }
        })]
      }, index))
    })
  });
};

/** 列表子项目骨架屏 */
const ListSkeletonItem = ({
  active
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_card.default, {
    bordered: false
    // eslint-disable-next-line react/no-array-index-key
    ,
    style: {
      borderRadius: 0
    },
    bodyStyle: {
      padding: 24
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        style: {
          maxWidth: '100%',
          flex: 1
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
          active: active,
          title: {
            width: 100,
            style: {
              marginTop: 0
            }
          },
          paragraph: {
            rows: 1,
            style: {
              margin: 0
            }
          }
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default.Button, {
        active: active,
        size: "small",
        style: {
          width: 165,
          marginTop: 12
        }
      })]
    })
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {})]
});

/** 列表骨架屏 */
exports.ListSkeletonItem = ListSkeletonItem;
const ListSkeleton = ({
  size,
  active = true,
  actionButton
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_card.default, {
  bordered: false,
  bodyStyle: {
    padding: 0
  },
  children: [new Array(size).fill(null).map((_, index) =>
  /*#__PURE__*/
  // eslint-disable-next-line react/no-array-index-key
  (0, _jsxRuntime.jsx)(ListSkeletonItem, {
    active: !!active
  }, index)), actionButton !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.default, {
    bordered: false,
    style: {
      borderTopRightRadius: 0,
      borderTopLeftRadius: 0
    },
    bodyStyle: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default.Button, {
      style: {
        width: 102
      },
      active: active,
      size: "small"
    })
  })]
});

/**
 * 面包屑的 骨架屏
 *
 * @param param0
 */
exports.ListSkeleton = ListSkeleton;
const PageHeaderSkeleton = ({
  active
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
  style: {
    marginBottom: 16
  },
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
    paragraph: false,
    title: {
      width: 185
    }
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default.Button, {
    active: active,
    size: "small"
  })]
});
exports.PageHeaderSkeleton = PageHeaderSkeleton;
/**
 * 列表操作栏的骨架屏
 *
 * @param param0
 */
const ListToolbarSkeleton = ({
  active
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.default, {
  bordered: false,
  style: {
    borderBottomRightRadius: 0,
    borderBottomLeftRadius: 0
  },
  bodyStyle: {
    paddingBottom: 8
  },
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_space.default, {
    style: {
      width: '100%',
      justifyContent: 'space-between'
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default.Button, {
      active: active,
      style: {
        width: 200
      },
      size: "small"
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_space.default, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default.Button, {
        active: active,
        size: "small",
        style: {
          width: 120
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default.Button, {
        active: active,
        size: "small",
        style: {
          width: 80
        }
      })]
    })]
  })
});
exports.ListToolbarSkeleton = ListToolbarSkeleton;
const ListPageSkeleton = ({
  active = true,
  statistic,
  actionButton,
  toolbar,
  pageHeader,
  list = 5
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
  style: {
    width: '100%'
  },
  children: [pageHeader !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(PageHeaderSkeleton, {
    active: active
  }), statistic !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(StatisticSkeleton, {
    size: statistic,
    active: active
  }), (toolbar !== false || list !== false) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_card.default, {
    bordered: false,
    bodyStyle: {
      padding: 0
    },
    children: [toolbar !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(ListToolbarSkeleton, {
      active: active
    }), list !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(ListSkeleton, {
      size: list,
      active: active,
      actionButton: actionButton
    })]
  })]
});
var _default = ListPageSkeleton;
exports.default = _default;