import './index.less';
import React, { useMemo } from 'react';
import { Card, Row, Col, Icon, Tooltip } from 'antd';
import { CardProps } from 'antd/lib/card';
import { TinyLine } from '@ant-design/charts';
import { TinyLineConfig } from '@ant-design/charts/es/tinyLine';

interface IProps extends CardProps {
  name: string;
  help?: string;
  value: number | undefined;
  ratio: number | undefined;
  showChart?: boolean;
  chartConfig?: TinyLineConfig;
  compareData?: string[];
}

export default ({
  name,
  help,
  value,
  ratio,
  showChart = true,
  chartConfig,
  compareData,
  ...rest
}: IProps) => {
  const height = chartConfig?.height || 60;
  const helpIcon = useMemo(() => {
    if (!help) return null;
    return (
      <Tooltip title="help">
        <Col className="bf-chart-help-icon">
          <Icon type="question-circle" />
        </Col>
      </Tooltip>
    );
  }, [help]);
  const ratioRow = useMemo(() => {
    if (!ratio) return null;
    if (ratio > 0) {
      return (
        <>
          <Col>环比前一日</Col>
          <Col
            style={{
              margin: '0 3px',
            }}
          >
            {Number(ratio).mul(100) + '%'}
          </Col>
          <Col className="bf-chart-data-up">
            <Icon type="caret-up" />
          </Col>
        </>
      );
    }
    if (ratio === 0) {
      return <Col>环比前一日 持平</Col>;
    }
    return (
      <>
        <Col>环比前一日</Col>
        <Col
          style={{
            margin: '0 3px',
          }}
        >
          {Math.abs(ratio).mul(100) + '%'}
        </Col>
        <Col className="bf-chart-data-down">
          <Icon type="caret-down" />
        </Col>
      </>
    );
  }, [ratio, value]);
  const lineChart = useMemo(() => {
    if (!showChart) return null;
    const config = {
      data: [],
      ...chartConfig,
      height,
      autoFit: true,
      smooth: true,
      tooltip: {
        showCrosshairs: true,
        showMarkers: true,
        customContent: function(x: string, data: any) {
          let value = data[0]?.data?.y;
          value = isNaN(Number(value)) ? 0 : Number(value);
          return value._toThousands();
        },
      },
    };
    if (compareData) {
      config.tooltip.customContent = function(x: string, data: any) {
        let value = data[0]?.data?.y;
        value = isNaN(Number(value)) ? 0 : Number(value);
        return `${compareData[Number(x)]}: ${value._toThousands()}`;
      };
    }
    return <TinyLine {...config} />;
  }, [showChart, compareData, chartConfig]);
  const text = isNaN(Number(value))
    ? value || '--'
    : Number(value)._toThousands();
  return (
    <Card size="small" {...rest}>
      <Row
        type="flex"
        justify="space-between"
        style={{
          marginBottom: 10,
        }}
      >
        <Col className="bf-chart-indexes-title">{name}</Col>
        {helpIcon}
      </Row>
      <Row className="bf-chart-indexes-value">{text}</Row>
      {lineChart && (
        <div
          style={{
            height: height,
          }}
        >
          {lineChart}
        </div>
      )}
      <div className="bf-chart-indexes-line"></div>
      <Row type="flex" align="bottom" className="bf-chart-indexes-footer">
        {ratioRow}
      </Row>
    </Card>
  );
};