"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.TableSkeleton = exports.TableItemSkeleton = exports.DescriptionsSkeleton = void 0;
var _react = _interopRequireDefault(require("react"));
var _skeleton = _interopRequireDefault(require("../skeleton"));
var _card = _interopRequireDefault(require("../card"));
var _useMediaAntdQuery = _interopRequireDefault(require("use-media-antd-query"));
var _List = require("./List");
var _jsxRuntime = require("react/jsx-runtime");
const MediaQueryKeyEnum = {
  xs: 1,
  sm: 2,
  md: 3,
  lg: 3,
  xl: 3,
  xxl: 4
};
const DescriptionsLargeItemSkeleton = ({
  active
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
  style: {
    marginTop: 32
  },
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default.Button, {
    active: active,
    size: "small",
    style: {
      width: 100,
      marginBottom: 16
    }
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: {
      width: '100%',
      justifyContent: 'space-between',
      display: 'flex'
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        flex: 1,
        marginRight: 24,
        maxWidth: 300
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
        active: active,
        paragraph: false,
        title: {
          style: {
            marginTop: 0
          }
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
        active: active,
        paragraph: false,
        title: {
          style: {
            marginTop: 8
          }
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
        active: active,
        paragraph: false,
        title: {
          style: {
            marginTop: 8
          }
        }
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        style: {
          maxWidth: 300,
          margin: 'auto'
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
          active: active,
          paragraph: false,
          title: {
            style: {
              marginTop: 0
            }
          }
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
          active: active,
          paragraph: false,
          title: {
            style: {
              marginTop: 8
            }
          }
        })]
      })
    })]
  })]
});
const DescriptionsItemSkeleton = ({
  size,
  active
}) => {
  const colSize = (0, _useMediaAntdQuery.default)();
  const arraySize = size === undefined ? MediaQueryKeyEnum[colSize] || 3 : size;
  return /*#__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: {
        flex: 1,
        paddingLeft: index === 0 ? 0 : 24,
        paddingRight: index === arraySize - 1 ? 0 : 24
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
        active: active,
        paragraph: false,
        title: {
          style: {
            marginTop: 0
          }
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
        active: active,
        paragraph: false,
        title: {
          style: {
            marginTop: 8
          }
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
        active: active,
        paragraph: false,
        title: {
          style: {
            marginTop: 8
          }
        }
      })]
    }, index))
  });
};

/**
 * Table 的子项目骨架屏
 *
 * @param param0
 */
const TableItemSkeleton = ({
  active,
  header = false
}) => {
  const colSize = (0, _useMediaAntdQuery.default)();
  const arraySize = MediaQueryKeyEnum[colSize] || 3;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        display: 'flex',
        background: header ? 'rgba(0,0,0,0.02)' : 'none',
        padding: '24px 8px'
      },
      children: [new Array(arraySize).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        style: {
          flex: 1,
          paddingLeft: header && index === 0 ? 0 : 20,
          paddingRight: 32
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
          active: active,
          paragraph: false,
          title: {
            style: {
              margin: 0,
              height: 24,
              width: header ? '75px' : '100%'
            }
          }
        })
      }, index)), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        style: {
          flex: 3,
          paddingLeft: 32
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
          active: active,
          paragraph: false,
          title: {
            style: {
              margin: 0,
              height: 24,
              width: header ? '75px' : '100%'
            }
          }
        })
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.Line, {
      padding: "0px 0px"
    })]
  });
};

/**
 * Table 骨架屏
 *
 * @param param0
 */
exports.TableItemSkeleton = TableItemSkeleton;
const TableSkeleton = ({
  active,
  size = 4
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_card.default, {
  bordered: false,
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default.Button, {
    active: active,
    size: "small",
    style: {
      width: 100,
      marginBottom: 16
    }
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TableItemSkeleton, {
    header: true,
    active: active
  }), new Array(size).fill(null).map((_, index) =>
  /*#__PURE__*/
  // eslint-disable-next-line react/no-array-index-key
  (0, _jsxRuntime.jsx)(TableItemSkeleton, {
    active: active
  }, index)), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    style: {
      display: 'flex',
      justifyContent: 'flex-end',
      paddingTop: 16
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default, {
      active: active,
      paragraph: false,
      title: {
        style: {
          margin: 0,
          height: 32,
          float: 'right',
          maxWidth: '630px'
        }
      }
    })
  })]
});
exports.TableSkeleton = TableSkeleton;
const DescriptionsSkeleton = ({
  active
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_card.default, {
  bordered: false,
  style: {
    borderTopRightRadius: 0,
    borderTopLeftRadius: 0
  },
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.default.Button, {
    active: active,
    size: "small",
    style: {
      width: 100,
      marginBottom: 16
    }
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DescriptionsItemSkeleton, {
    active: active
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DescriptionsLargeItemSkeleton, {
    active: active
  })]
});
exports.DescriptionsSkeleton = DescriptionsSkeleton;
const DescriptionsPageSkeleton = ({
  active = true,
  pageHeader,
  list
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
  style: {
    width: '100%'
  },
  children: [pageHeader !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.PageHeaderSkeleton, {
    active: active
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DescriptionsSkeleton, {
    active: active
  }), list !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.Line, {}), list !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(TableSkeleton, {
    active: active,
    size: list
  })]
});
var _default = DescriptionsPageSkeleton;
exports.default = _default;