import {
  ConfigProvider,
  DescriptionsProps,
  Descriptions as OldDescriptions,
} from 'antd';
import React, { useContext } from 'react';
import './index.less';
import classNames from 'classnames';
import Item from './DescriptionsItem';
type propsType = {
  layout?: 'horizontal' | 'vertical' | 'inline';
  labelWidth?: number;
  labelPosition?: 'right' | 'left';
};
const Descriptions = (props: Omit<DescriptionsProps, 'layout'> & propsType) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-descriptions');
  const { layout, labelWidth, labelPosition, ...res } = props;
  const widthStyle: React.CSSProperties = {
    width: `${labelWidth}px` || 'auto',
    display: `${labelWidth ? 'inline-block' : 'revert'}`,
  };
  const labelPositionStyle: React.CSSProperties = {
    textAlign: `${labelPosition === 'right' ? 'end' : 'start'}`,
  };
  return (
    <OldDescriptions
      {...res}
      column={props.column || 1}
      layout={layout === 'inline' ? 'vertical' : layout || 'horizontal'}
      className={classNames(
        `${prefixCls}`,
        props.className,
        `${layout === 'inline' && prefixCls + '-inline'}`,
      )}
      labelStyle={{ ...res.labelStyle, ...widthStyle, ...labelPositionStyle }}
    >
      {props.children}
    </OldDescriptions>
  );
};

Descriptions.Item = Item;

export { Descriptions };