import React, { memo } from 'react';
import { Line } from 'react-chartjs-2';
import { Grid, Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { ChartOptions } from 'chart.js';

interface MultiAxisLineChartProps {
    months: string[];
    containers: number[];
    full_truck_load: number[];
    loose_cargo: number[];
}

const movementTypeColors: { [key: string]: string } = {
    containers: '#1FA0ED',
    loose_cargo: '#223A59',
    full_truck_load: '#FFCE56'
};

const movementTypeLabels: { [key: string]: string } = {
    containers: 'Containers',
    loose_cargo: 'Loose Cargo',
    full_truck_load: 'Full Truck Load'
};

const useStyles = makeStyles(() => ({
    mainBox: {
        borderRadius: '8px',
        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
        height: '300px',
        paddingTop: '20px',
        backgroundColor: 'white',
        justifyContent: 'center',
        textAlign: 'center',
        flexDirection: 'column',
        alignItems: 'center',
    },
}));


const options: ChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
        position: 'bottom',
        labels: {
            boxWidth: 10,
            padding: 10,
            fontSize: 12,
        },
    },
    tooltips: {
        callbacks: {
            title: (tooltipItems: any) => `${tooltipItems[0].label}`,
        },
    },
    scales: {
        xAxes: [{
            scaleLabel: {
                display: false,
                labelString: 'Month',
            },
            ticks: {
                autoSkip: true,
                maxTicksLimit: 12,
            },
        }],
        yAxes: [{
            id: 'y-axis-1',
            scaleLabel: {
                display: true,
            },
            ticks: {
                beginAtZero: true,
            },
        }],
    },
};

const MultiAxisLineChart: React.FC<MultiAxisLineChartProps> = ({ months, containers, full_truck_load, loose_cargo }) => {
    const classes = useStyles();

    const chartData = {
        labels: months,
        datasets: [
            {
                label: movementTypeLabels.containers,
                data: containers,
                borderColor: movementTypeColors.containers,
                backgroundColor: movementTypeColors.containers,
                hoverBackgroundColor: movementTypeColors.containers,
                fill: false,
                yAxisID: 'y-axis-1',
            },
            {
                label: movementTypeLabels.loose_cargo,
                data: loose_cargo,
                borderColor: movementTypeColors.loose_cargo,
                backgroundColor: movementTypeColors.loose_cargo,
                hoverBackgroundColor: movementTypeColors.loose_cargo,
                fill: false,
                yAxisID: 'y-axis-1',
            },
            {
                label: movementTypeLabels.full_truck_load,
                data: full_truck_load,
                borderColor: movementTypeColors.full_truck_load,
                backgroundColor: movementTypeColors.full_truck_load,
                hoverBackgroundColor: movementTypeColors.full_truck_load,
                fill: false,
                yAxisID: 'y-axis-1',
            }
        ]
    };


    return (
        <Grid item className={classes.mainBox}>
            <Typography style={{ fontSize: '1rem', marginBottom: '10px' }}>Jobs Completed</Typography>
            <div style={{ height: '250px' }}>
                <Line data={chartData} options={options} />
            </div>
        </Grid>
    );
};

export default memo(MultiAxisLineChart);