/** @format */

import React, { useRef, useLayoutEffect, useEffect, useState } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'zrender/lib/svg/svg';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/grid';
import _ from 'lodash';
import { Container } from './styled';
import Chart from './chart';
interface RingChartProps {
  size?: Record<string, any>;
  data?: Record<string, any>;
  backgroundColor?: Record<string, any>;
  [key: string]: any;
}

const RingChart = (props: RingChartProps) => {
  const { data, size, theme, backgroundColor } = props;
  const isMax = data && data.length > 4;
  return (
    <Container style={size}>
      {data && data.length
        ? data.map((item: any, index: any) => {
            return (
              <div
                key={index}
                style={isMax ? { width: '33%' } : { width: '25%' }}
                className="ring-box"
              >
                <Chart
                  backgroundColor={backgroundColor}
                  theme={theme}
                  key={index}
                  {...item}
                />
                <span className="ring-title">{item.data.name}</span>
              </div>
            );
          })
        : null}
    </Container>
  );
};

export default RingChart;