var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useEffect, useMemo } from "react";
import { Line, defaults } from "react-chartjs-2";
import Color from "color";
import { useTheme } from "styled-components";
import "chartjs-adapter-moment";
import { fontConfig, valueFormatter } from "./utils";
/*
 ** Returns the correct config based on the variant
 */
const getConfig = (variant, options) => {
    const config = {
        small: {
            gradient: { alpha: 0.3 },
            scales: { y: { display: false }, x: { display: false, type: "time" } },
        },
        default: {
            gradient: { alpha: 0.1 },
            scales: {
                y: {
                    display: true,
                    grid: {
                        color: options.gridColor,
                        borderDash: [4, 4],
                        tickWidth: 0,
                        tickLength: 18,
                        // This is an hack to don't render a duplicate axis
                        borderWidth: 0,
                    },
                    ticks: { callback: valueFormatter, labelOffset: -3 },
                },
                x: {
                    display: true,
                    grid: {
                        color: options.gridColor,
                        borderDash: [4, 4],
                        tickWidth: 0,
                        tickLength: 15,
                        // Don't render a duplicate axis
                        borderWidth: 0,
                    },
                    // always display first/last ticks
                    bounds: "ticks",
                    type: "time",
                    // control how the tickers on the x-axis are formatted
                    time: options.timeOptions,
                },
            },
        },
    };
    return config[variant];
};
const defaultValue = {
    variant: "default",
    valueKey: "value",
    timeOptions: { unit: "month", displayFormats: { month: "MMM." } },
};
/**
 * @remarks This component must have a parent that has only it as a child and it must be in relative position!
 * @privateRemarks Don't name this component "Chart", that will conflict with the Chart.js library cuz of the adapter
 */
export default (_a) => {
    var { data, color, variant = defaultValue.variant, valueKey = defaultValue.valueKey, timeOptions = defaultValue.timeOptions } = _a, chartProps = __rest(_a, ["data", "color", "variant", "valueKey", "timeOptions"]);
    const theme = useTheme();
    const config = useMemo(() => getConfig(variant, { gridColor: theme.colors.neutral.c40, timeOptions }), [variant, theme.colors.neutral.c40, timeOptions]);
    // inject default font configuration at mount
    useEffect(() => {
        defaults.font = fontConfig;
    }, []);
    const chartData = useMemo(() => ({
        datasets: [
            {
                borderColor: color,
                borderWidth: 2,
                fill: "start",
                backgroundColor: (context) => {
                    const chart = context.chart;
                    const { ctx, chartArea } = chart;
                    // This case happens on initial chart load
                    if (!chartArea)
                        return null;
                    // Create gradient based on the props color
                    const gradient = ctx.createLinearGradient(0, 0, 0, chartArea.height / 1.2);
                    gradient.addColorStop(0, Color(color).alpha(config.gradient.alpha).string());
                    gradient.addColorStop(1, Color(color).alpha(0.0).string());
                    return gradient;
                },
                // prevent points rendering
                pointRadius: 0,
                pointHitRadius: 0,
                data: data.map(({ date: x, [`${valueKey}`]: y }) => ({ x, y })),
            },
        ],
    }), 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [color, data, valueKey, variant]);
    const options = useMemo(() => ({
        // Responsive options use the parent element to create the canvas
        responsive: true,
        maintainAspectRatio: false,
        plugins: { tooltips: { enabled: false }, legend: { display: false } },
        animation: false,
        elements: {
            points: { radius: 0 },
            line: {
                // Bezier curve tension of the line. Set to 0 to draw straightlines.
                tension: 0.2,
            },
        },
        scales: config.scales,
    }), [config.scales]);
    // The redraw is needed to allow the chart to be updated with new value
    return React.createElement(Line, Object.assign({ data: chartData, options: options }, chartProps, { redraw: true }));
};
//# sourceMappingURL=index.js.map