import React from 'react';
import Skeleton from '../skeleton';
import Card from '../card';
import useMediaQuery from 'use-media-antd-query';
import { PageHeaderSkeleton, Line } from './List';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
const MediaQueryKeyEnum = {
  xs: 1,
  sm: 2,
  md: 3,
  lg: 3,
  xl: 3,
  xxl: 4
};
const DescriptionsLargeItemSkeleton = ({
  active
}) => /*#__PURE__*/_jsxs("div", {
  style: {
    marginTop: 32
  },
  children: [/*#__PURE__*/_jsx(Skeleton.Button, {
    active: active,
    size: "small",
    style: {
      width: 100,
      marginBottom: 16
    }
  }), /*#__PURE__*/_jsxs("div", {
    style: {
      width: '100%',
      justifyContent: 'space-between',
      display: 'flex'
    },
    children: [/*#__PURE__*/_jsxs("div", {
      style: {
        flex: 1,
        marginRight: 24,
        maxWidth: 300
      },
      children: [/*#__PURE__*/_jsx(Skeleton, {
        active: active,
        paragraph: false,
        title: {
          style: {
            marginTop: 0
          }
        }
      }), /*#__PURE__*/_jsx(Skeleton, {
        active: active,
        paragraph: false,
        title: {
          style: {
            marginTop: 8
          }
        }
      }), /*#__PURE__*/_jsx(Skeleton, {
        active: active,
        paragraph: false,
        title: {
          style: {
            marginTop: 8
          }
        }
      })]
    }), /*#__PURE__*/_jsx("div", {
      style: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      },
      children: /*#__PURE__*/_jsxs("div", {
        style: {
          maxWidth: 300,
          margin: 'auto'
        },
        children: [/*#__PURE__*/_jsx(Skeleton, {
          active: active,
          paragraph: false,
          title: {
            style: {
              marginTop: 0
            }
          }
        }), /*#__PURE__*/_jsx(Skeleton, {
          active: active,
          paragraph: false,
          title: {
            style: {
              marginTop: 8
            }
          }
        })]
      })
    })]
  })]
});
const DescriptionsItemSkeleton = ({
  size,
  active
}) => {
  const colSize = useMediaQuery();
  const arraySize = size === undefined ? MediaQueryKeyEnum[colSize] || 3 : size;
  return /*#__PURE__*/_jsx("div", {
    style: {
      width: '100%',
      justifyContent: 'space-between',
      display: 'flex'
    },
    children: new Array(arraySize).fill(null).map((_, index) => /*#__PURE__*/_jsxs("div", {
      style: {
        flex: 1,
        paddingLeft: index === 0 ? 0 : 24,
        paddingRight: index === arraySize - 1 ? 0 : 24
      },
      children: [/*#__PURE__*/_jsx(Skeleton, {
        active: active,
        paragraph: false,
        title: {
          style: {
            marginTop: 0
          }
        }
      }), /*#__PURE__*/_jsx(Skeleton, {
        active: active,
        paragraph: false,
        title: {
          style: {
            marginTop: 8
          }
        }
      }), /*#__PURE__*/_jsx(Skeleton, {
        active: active,
        paragraph: false,
        title: {
          style: {
            marginTop: 8
          }
        }
      })]
    }, index))
  });
};

/**
 * Table 的子项目骨架屏
 *
 * @param param0
 */
export const TableItemSkeleton = ({
  active,
  header = false
}) => {
  const colSize = useMediaQuery();
  const arraySize = MediaQueryKeyEnum[colSize] || 3;
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_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__*/_jsx("div", {
        style: {
          flex: 1,
          paddingLeft: header && index === 0 ? 0 : 20,
          paddingRight: 32
        },
        children: /*#__PURE__*/_jsx(Skeleton, {
          active: active,
          paragraph: false,
          title: {
            style: {
              margin: 0,
              height: 24,
              width: header ? '75px' : '100%'
            }
          }
        })
      }, index)), /*#__PURE__*/_jsx("div", {
        style: {
          flex: 3,
          paddingLeft: 32
        },
        children: /*#__PURE__*/_jsx(Skeleton, {
          active: active,
          paragraph: false,
          title: {
            style: {
              margin: 0,
              height: 24,
              width: header ? '75px' : '100%'
            }
          }
        })
      })]
    }), /*#__PURE__*/_jsx(Line, {
      padding: "0px 0px"
    })]
  });
};

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