import React, {useContext} from 'react';
import {ChartData} from "../../../models/Riview/ChartData";
import Chart from "react-apexcharts";
import {arraySum, getRate} from "../../../helpers/functions";
import './radialrate.scss'
import HeaderControlsContext from "../../../context/headerControls-context";

type RadialRateProps = {
    chart: ChartData
}

const RadialRate = ({chart}: RadialRateProps) => {

    const data = chart.series[0].data
    const total = arraySum(data)
    const rate = getRate(data)
    const title= chart.series[0].name
    const {showSensitive} = useContext(HeaderControlsContext)
    return (<>
            {total !==-1 &&  <div className='radial-rate'>
                <div className="content">
                    <h4>{title}</h4>
                    <p>
                        {showSensitive ? total.toLocaleString('el-GR') : '*********'} €
                    </p>


                </div>
                <div className="radial">
                    <Chart

                        options={{

                            chart: {
                                id: 'bar-chart',

                            },
                        colors: [`${parseFloat(rate)<0 ? 'var(--error-color)' : 'var(--success-color)'}`],
                            labels: [`${rate}%`],
                            plotOptions: {

                                radialBar: {

                                    hollow: {

                                        size: '55%',
                                        margin: 0,
                                    background: 'var(--form-background)'
                                    },
                                    dataLabels: {

                                        name: {
                                            show: true,
                                            fontFamily: 'hero-new, sans-serif',
                                            fontWeight: 800,
                                            offsetY: 5
                                        },
                                        value: {
                                            show: false,
                                        }
                                    },
                                    track: {
                                        strokeWidth: '100%',
                                    }
                                },


                            },
                        }}

                        series={[Math.abs(parseFloat(rate))]}
                        type="radialBar"
                        width="100%"
                        height={210}
                    />
                </div>

            </div>}
        </>
    );
}

export default RadialRate;