/* eslint-disable react/prop-types */
import ReactApexChart from 'react-apexcharts';

const PingChart = ({ data, theme }) => {

  const isDark = theme === 'dark';

  const chartData = {
    series: [
      {
        name: 'Ping',
        data: data.map((item) => ({
          x: new Date(new Date(item.datetime).getTime() + 7 * 60 * 60 * 1000).getTime(),
          y: (item.data.ping.latency).toFixed(1),
        })),
      },
    ],
    options: {
      chart: {
        height: 250,
        type: 'area',
        background: isDark ? '#1e1e1e' : '#ffffff',
        toolbar: { show: false },
      },
      dataLabels: { enabled: false },
      stroke: {
        curve: 'smooth',
        colors: [ isDark ? '#ffc107' : '#d4a307'],
      },
      xaxis: {
        type: 'datetime',
        labels: { style: { fontFamily: 'Poppins, sans-serif', colors: isDark ? '#ffffff' : '#333333' } },
        axisBorder: { color: isDark ? '#777777' : '#cccccc' },
        axisTicks: { color: isDark ? '#777777' : '#cccccc' },
      },
      yaxis: {
        labels: { style: { fontFamily: 'Poppins, sans-serif', colors: isDark ? '#ffffff' : '#333333' } },
      },
      grid: {
        borderColor: isDark ? '#777777' : '#cccccc',
        strokeDashArray: 4,
      },
      tooltip: {
        theme: isDark ? 'dark' : 'light',
        x: { format: 'dd/MM/yy HH:mm' },
        y: { formatter: (val) => `${val} Mbps` },
      },
      colors: [ isDark ? '#ffc107' : '#d4a307'],
      fill: {
        type: 'gradient',
        gradient: {
          shade: isDark ? 'dark' : 'light',
          type: 'vertical',
          gradientToColors: [ isDark ? '#ffc107' : '#d4a307'],
          stops: [0, 100],
        },
      },
    },
  };

  return <ReactApexChart options={chartData.options} series={chartData.series} type="area" height={250} />;
};

export default PingChart;