import React from 'react';
import useMediaQuery from 'use-media-antd-query';
import Skeleton from '../skeleton';
import Card from '../card';
import Space from '../space';
import Divider from '../divider';

/** 一条分割线 */
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
export const Line = ({
  padding
}) => /*#__PURE__*/_jsx("div", {
  style: {
    padding: padding || '0 24px'
  },
  children: /*#__PURE__*/_jsx(Divider, {
    style: {
      margin: 0
    }
  })
});
export const MediaQueryKeyEnum = {
  xs: 2,
  sm: 2,
  md: 4,
  lg: 4,
  xl: 6,
  xxl: 6
};
const StatisticSkeleton = ({
  size,
  active
}) => {
  const colSize = useMediaQuery();
  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__*/_jsx(Card, {
    bordered: false,
    style: {
      marginBottom: 16
    },
    children: /*#__PURE__*/_jsx("div", {
      style: {
        width: '100%',
        justifyContent: 'space-between',
        display: 'flex'
      },
      children: new Array(arraySize).fill(null).map((_, index) => /*#__PURE__*/_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__*/_jsx(Skeleton, {
          active: active,
          paragraph: false,
          title: {
            width: 100,
            style: {
              marginTop: 0
            }
          }
        }), /*#__PURE__*/_jsx(Skeleton.Button, {
          active: active,
          style: {
            height: 48
          }
        })]
      }, index))
    })
  });
};

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

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

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