import { Skeleton as OldSkeleton, SkeletonProps, ConfigProvider } from 'antd';
import { AvatarProps } from 'antd/lib/skeleton/Avatar';
import { SkeletonButtonProps } from 'antd/lib/skeleton/Button';
import { SkeletonInputProps } from 'antd/lib/skeleton/Input';
import { SkeletonImageProps } from 'antd/lib/skeleton/Image';
import { SkeletonNodeProps } from 'antd/lib/skeleton/Node';
import React, { useContext } from 'react';
import { Icon } from '../index';
import './index.less';

import classNames from 'classnames';

const Skeleton = (props: SkeletonProps) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-skeleton');

  return (
    <OldSkeleton
      {...props}
      className={classNames(`${prefixCls}`, props.className)}
    ></OldSkeleton>
  );
};

Skeleton.Avatar = (props: AvatarProps) => {
  return <OldSkeleton.Avatar {...props}></OldSkeleton.Avatar>;
};

Skeleton.Button = (props: SkeletonButtonProps) => {
  return <OldSkeleton.Button {...props}></OldSkeleton.Button>;
};

Skeleton.Input = (props: SkeletonInputProps) => {
  return <OldSkeleton.Input {...props}></OldSkeleton.Input>;
};

Skeleton.Node = (props: SkeletonNodeProps) => {
  return <OldSkeleton.Node {...props}></OldSkeleton.Node>;
};

Skeleton.Image = (props: SkeletonImageProps) => {
  return <OldSkeleton.Image {...props}></OldSkeleton.Image>;
};

Skeleton.Images = (props: SkeletonImageProps) => {
  return (
    <Skeleton.Node {...props} fullSize={false}>
      <Icon
        iconName="Picture"
        style={{ fontSize: '60px', color: 'var(--fill-1)' }}
      />
    </Skeleton.Node>
  );
};

export { Skeleton };