/* eslint-disable react/require-default-props */
import type { TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
import { Box, Skeleton, useTheme } from '@mui/material';
import { useState } from 'react';
import { Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';

export type TCurrency = TPaymentCurrency & { color: string; method: TPaymentMethod };
export type TCurrencyMap = { [key: string]: TCurrency };

export default function Chart({
  loading,
  data,
  currencies,
  height = 320,
}: {
  loading: boolean;
  data: any[];
  currencies: TCurrencyMap;
  height?: number;
}) {
  const theme = useTheme();
  const [series, setSeries] = useState<any>(
    Object.keys(currencies).reduce(
      (acc, key) => {
        // @ts-ignore
        acc[currencies[key].symbol] = false;
        return acc;
      },
      { hover: null }
    )
  );

  const onMouseOver = (e: any) => {
    if (!series[e.dataKey]) {
      setSeries({ ...series, hover: e.dataKey });
    }
  };

  const onMouseOut = () => {
    setSeries({ ...series, hover: null });
  };

  const onSelect = (e: any) => {
    setSeries({ ...series, [e.dataKey]: !series[e.dataKey], hover: null });
  };

  if (loading) {
    return <Skeleton variant="rounded" width="100%" height={height} />;
  }

  return (
    <Box sx={{ width: '100%', height }}>
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart
          width={height * 1.5}
          height={height}
          data={data}
          margin={{
            top: 10,
            right: 0,
            left: 0,
            bottom: 0,
          }}>
          <CartesianGrid strokeDasharray="3 3" stroke={theme.palette.grey[200]} />
          <Tooltip
            contentStyle={{ backgroundColor: theme.palette.background.paper, borderColor: theme.palette.divider }}
          />
          {Object.keys(currencies).map((x: string, i) => {
            const dataKey = currencies[x]?.symbol as string;
            const color = currencies[x]?.color as string;
            return (
              <Area
                type="monotone"
                key={x}
                dataKey={dataKey}
                stackId={i}
                fill={color}
                stroke={color}
                hide={series[dataKey] === true}
                fillOpacity={Number(series.hover === dataKey || !series.hover ? 1 : 0.6)}
              />
            );
          })}
          <Legend
            wrapperStyle={{ cursor: 'pointer' }}
            onClick={onSelect}
            onMouseOver={onMouseOver}
            onMouseOut={onMouseOut}
          />
          <XAxis
            dataKey="timestamp"
            tick={{ fill: theme.palette.text.secondary }}
            stroke={theme.palette.text.secondary}
          />
          <YAxis
            orientation="left"
            mirror
            tickLine
            tickMargin={2}
            tick={{ fill: theme.palette.text.secondary }}
            stroke={theme.palette.text.secondary}
          />
        </AreaChart>
      </ResponsiveContainer>
    </Box>
  );
}
