import React from 'react';
import { __ } from '@wordpress/i18n';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { isEmpty } from 'ramda';

// components


const ChartDomandePerBando = ({ title, data = [] }) => {
    const truncateText = (text) => {
        const maxLength = 12;
        if (typeof text === 'string' && text.length > maxLength) {
            return `${text.slice(0, maxLength)}...`;
        }
        return text;
    };

    // Custom tooltip
    const CustomTooltip = ({ active, payload, label }) => {
        if (active && payload && payload.length) {
            return (
                <div className="chartCard__tooltip">
                    <p className="chartCard__tooltipTitle">{label}</p>
                    <p className="chartCard__tooltipText">
                        {__('In bozza', 'gepafin')}: {payload[0].value}
                    </p>
                    <p className="chartCard__tooltipText">
                        {__('Inviate', 'gepafin')}: {payload[1].value}
                    </p>
                </div>
            );
        }
        return null;
    };

    return (<div className="chartCard">
        {title ? <span className="chartCard__title">{title}</span> : null}
        {data && !isEmpty(data)
            ? <div className="chartCard__chart">
                <ResponsiveContainer width="100%" height="100%">
                    <BarChart
                        data={data}
                        margin={{
                            top: 20,
                            right: 30,
                            left: 20,
                            bottom: 60,
                        }}
                    >
                        <CartesianGrid strokeDasharray="3 3"/>
                        <XAxis dataKey="callName" angle={-45} textAnchor="end" height={120}
                               tickFormatter={truncateText}/>
                        <YAxis/>
                        <Tooltip content={<CustomTooltip/>}/>
                        <Legend/>
                        <Bar dataKey="numberOfDraftApplications" fill="#8884d8" name={__('Domande in bozza', 'gepafin')}/>
                        <Bar dataKey="numberOfSubmitedApplications" fill="#EEC137" name={__('Domande inviate', 'gepafin')}/>
                    </BarChart>
                </ResponsiveContainer>
            </div> : null}
    </div>)
}

export default ChartDomandePerBando;