/**
 * Component used for Table 
 * 
 * @author Hasna
 * 
 * Ensure to follow a minimal standard
 */


import React, { useState, useEffect } from 'react';


// import { ResponsivePie } from '@nivo/pie'

import { Modal } from 'antd';

import StatisticCard from '../statistic-card/statistic-card';

/**
 * To Display a bar graph
 *
 * @param {*} param0
 * @returns
 */
export default function PieChart({ data, ...props }) {

    const [pieData, setPieData] = useState([]);

    const [def, setDef] = useState([])

    useEffect(() => {

        if (data.length) {

            data = data.slice(1, data.length).map((record) => {

                record = {
                    "id": record.counts.title,
                    "label": record.counts.title,
                    "value": record.counts.total_cases,
                    "color": "hsl(2, 70%, 50%)",
                    stats: record.counts
                }

                return record;
            })
        }


        setPieData(data)

        data = data.map((item) => {
            item = {
                match: {
                    id: item.id
                },
                id: 'lines'
            }

            return item;
        })

        setDef(data)

    }, [])


    return (

        <div>

            <div className="graph-container">
                {/* {pieData.length ?
                    <ResponsivePie

                        arcLabelsSkipAngle={20}
                        arcLabelsRadiusOffset={0.55}
                        arcLabelsTextColor={{
                            from: 'color',
                            modifiers: [['darker', 0.6]],
                        }}
                        arcLinkLabelsOffset={2}
                        arcLinkLabelsColor={{ from: 'color' }}
                        arcLinkLabelsThickness={3}

                        arcLabelsComponent={({ datum, label, style }) => {


                            return (<div transform={style.transform}>
                                <circle fill={style.textColor} cy={6} r={15} />
                                <circle fill="#ffffff" stroke={datum.color} strokeWidth={2} r={16} />
                                <text
                                    textAnchor="middle"
                                    dominantBaseline="central"
                                    fill={style.textColor}
                                    style={{
                                        fontSize: 10,
                                        fontWeight: 800,
                                    }}
                                >
                                    {label}
                                </text>
                            </div>)
                        }}

                        tooltip={({ datum, }) => {

                            const { id, value, color, data } = datum

                            const { stats } = data;

                            const { total_lab_positive_cases } = stats;

                            return (< div
                                style={{
                                    padding: 12,
                                    color,
                                    background: '#222222',
                                }}
                            >
                                <strong>
                                    {id}: {value}
                                </strong>

                                <br />

                                <span>Confirmed Positive : {total_lab_positive_cases}</span>

                            </div>)
                        }}

                        data={pieData}
                        margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
                        innerRadius={0.5}
                        padAngle={0.7}
                        cornerRadius={3}
                        activeOuterRadiusOffset={8}
                        borderWidth={1}
                        borderColor={{
                            from: 'red',
                            modifiers: [
                                [
                                    'darker',
                                    0.2
                                ]
                            ]
                        }}
                        arcLinkLabelsSkipAngle={10}
                        arcLinkLabelsTextColor="#333333"


                        defs={[
                            {
                                id: 'dots',
                                type: 'patternDots',
                                background: 'inherit',
                                color: 'rgba(255, 255, 255, 0.3)',
                                size: 4,
                                padding: 1,
                                stagger: true
                            },
                            {
                                id: 'lines',
                                type: 'patternLines',
                                background: 'inherit',
                                color: 'rgba(255, 255, 255, 0.3)',
                                rotation: -45,
                                lineWidth: 6,
                                spacing: 10
                            }
                        ]}
                        fill={def}
                        legends={[
                            {
                                anchor: 'right',
                                direction: 'column',
                                justify: false,
                                translateX: 0,
                                translateY: 10,
                                itemsSpacing: 0,
                                itemWidth: 100,
                                itemHeight: 20,
                                itemTextColor: '#999',
                                itemDirection: 'left-to-right',
                                itemOpacity: 1,
                                symbolSize: 18,
                                symbolShape: 'circle',
                                effects: [
                                    {
                                        on: 'hover',
                                        style: {
                                            itemTextColor: '#000'
                                        }
                                    }
                                ]
                            }
                        ]}
                    />
                    : null} */}

            </div>
        </div >)
}