import React from 'react';
import styles from './index.less';
import { Statistic, Tabs } from 'antd';
import IconFont from '@sensoro/library/lib/components/icon-font';
import classnames from 'classnames';
import { NoField } from '@sensoro/sensoro-design';
import { formatNumber } from '@/utils';

const { TabPane } = Tabs;

interface CardProps {
  title: string;
  extra?: React.ReactNode | string;
}

export const Card: React.FC<CardProps> = props => {
  const { title, extra, children } = props;
  return (
    <div className={styles.card}>
      <div className={styles.header}>
        <span className={styles.title}>{title}</span>
        {extra}
      </div>
      <div className={styles.body}>{children}</div>
    </div>
  );
};

// 把number按size分组，返回最后一组的最小值
function getFlagNumber(number: number, size: number) {
  let res = -1;
  for (let i = number; i > 0; --i) {
    if (i % size === 0) {
      res = i;
      if (i === number) {
        continue;
      } else {
        res = i;
        break;
      }
    }
  }
  return res;
}

interface DescriptionsProps {
  column?: number;
  title?: string | React.ReactNode;
  style?: React.CSSProperties;
  offset?: number | { x: number; y: number };
}

export const Descriptions: React.FC<DescriptionsProps> = props => {
  const { column = 1, title, style, offset, children } = props;
  const offsetX = (typeof offset === 'number' ? offset : offset?.x) ?? 0;
  const offsetY = (typeof offset === 'number' ? offset : offset?.y) ?? 0;

  const itemWidth = `calc(${100 / column}% - ${(offsetX * (column - 1)) /
    column}px)`;

  const childCount = React.Children.count(children);
  const flagNumber = getFlagNumber(childCount, column);

  return (
    <div className={styles.descriptions} style={style}>
      {title && <div className={styles.title}>{title}</div>}
      <div className={styles.content}>
        {children &&
          //@ts-ignore
          React.Children.map(children, i => i)
            .filter((i: any) => i)
            .map((child: any, idx: number) => (
              <div
                key={idx}
                style={{
                  width: itemWidth,
                  // 这里column === 1 的情况让他也距离下边距为offset大小，这样刚刚好
                  marginBottom: idx < flagNumber ? offsetY : 0,
                  marginLeft: idx % column !== 0 ? offsetX : 0,
                }}
              >
                {child}
              </div>
            ))}
      </div>
    </div>
  );
};

Descriptions.defaultProps = {
  column: 1,
  offset: 16,
};

interface DescriptionsItemProps {
  label: string | React.ReactNode;
  placeHolder?: string | React.ReactNode;
}
export const DescriptionsItem: React.FC<DescriptionsItemProps> = props => {
  const { label, children, placeHolder } = props;
  // const childCount = React.Children.count(children);
  return (
    <>
      <span className={styles.label}>{label}</span>
      <div className={classnames(styles.value)}>{children || placeHolder}</div>
    </>
  );
};
DescriptionsItem.defaultProps = {
  placeHolder: <NoField />,
};

interface DescriptionsBorderItemProps {
  label: string;
  value: number;
  icon?: string;
}
export const DescriptionsBorderItem: React.FC<DescriptionsBorderItemProps> = props => {
  const { label, value, icon } = props;

  return (
    <div className={styles.borderItem}>
      <div>
        <div className={styles.number}>{formatNumber(value)}</div>
        <div className={styles.label}>{label}</div>
      </div>
      {/* <Statistic title={label} value={value} precision={precision} suffix={suffix} /> */}
      {icon && (
        <div className={styles.iconContainer}>
          <IconFont className={styles.icon} type={icon} />
        </div>
      )}
    </div>
  );
};

DescriptionsBorderItem.defaultProps = {
  precision: 2,
};

export const TabsView: React.FC<any> = props => {
  const { title, children, ...rest } = props;
  return (
    <div style={{ position: 'relative' }} className={styles.tab}>
      <Tabs animated={false} {...rest}>
        {children}
      </Tabs>
      <div
        style={{
          position: 'absolute',
          left: '24px',
          top: '15px',
          color: '#1F2126',
          fontSize: '16px',
          fontWeight: 'bold',
        }}
      >
        {title}
      </div>
    </div>
  );
};

export const TabViewPane: React.FC<any> = props => {
  const { children, ...rest } = props;
  return (
    <TabPane {...rest}>
      <div style={{ padding: '24px' }}>{children}</div>
    </TabPane>
  );
};

export const ContentHeader: React.FC<any> = props => {
  const { style, title, children } = props;

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        ...style,
      }}
    >
      <span style={{ fontSize: '14px', fontWeight: 'bold' }}>{title}</span>

      <div style={{ display: 'flex' }}>{children}</div>
    </div>
  );
};