import React, { memo } from 'react';
import { Card, Tabs, Row, Col } from 'antd';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import styles from './Analysis.less';
import { TimeBarChart, Pie } from '@/components/Charts';
import NumberInfo from '@/components/NumberInfo';

// const CustomTab = ({ data, currentTabKey: currentKey }) => (
//   <Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
//     <Col span={12}>
//       <NumberInfo
//         title={data.name}
//         subTitle={
//           <FormattedMessage id="app.analysis.conversion-rate" defaultMessage="Conversion Rate" />
//         }
//         gap={2}
//         total={`${data.cvr * 100}%`}
//         theme={currentKey !== data.name && 'light'}
//       />
//     </Col>
//     <Col span={12} style={{ paddingTop: 36 }}>
//       <Pie
//         animate={false}
//         color={currentKey !== data.name && '#BDE4FF'}
//         inner={0.55}
//         tooltip={false}
//         margin={[0, 0, 0, 0]}
//         percent={data.cvr * 100}
//         height={64}
//       />
//     </Col>
//   </Row>
// );

const { TabPane } = Tabs;

const OffbarData = memo(
  ({ activeKey, loading, offlineData, offlineChartData, handleTabChange }) => (
    <Card
      loading={loading}
      className={styles.offlineCard}
      bordered={false}
      style={{ marginTop: 32 }}
    >
      <Tabs activeKey={activeKey} onChange={handleTabChange}>
        {offlineData.map(shop => (
          <TabPane key={shop.name}>
            <div>
              <TimeBarChart
                height={400}
                data={offlineChartData}
                titleMap={{
                  y1: formatMessage({ id: 'app.analysis.sp' }),
                }}
                title={<FormattedMessage id="app.analysis.sp" defaultMessage="Sales Trend" />}
              />
            </div>
          </TabPane>
        ))}
      </Tabs>
    </Card>
  )
);

export default OffbarData;
