import type { AppRouter } from '@server/routers';
import type { Backtest } from '@server/routers/backtest';
import type { Execution } from '@server/routers/execution';
import type { TRPCClientErrorLike } from '@trpc/client';
import type { UseTRPCQueryResult } from '@trpc/react-query/shared';
import { subDays } from 'date-fns';
import type Decimal from 'decimal.js';
import { useTheme } from 'next-themes';
import { useEffect, useMemo, useRef, useState } from 'react';
import { Line, LineChart, ReferenceLine, ResponsiveContainer, YAxis } from 'recharts';

import { BacktestStatus, ExecutionStatus, ExecutionType } from '@cybotrade/core';

import { calculatePerformance } from '@/lib/calculation';
import { Skeleton } from '@/ui';
import { trpcVanilla } from '@/utils/trpc';

type EquityCurveRendererProps = {
  backtests: UseTRPCQueryResult<Backtest[], TRPCClientErrorLike<AppRouter>>;
  executions: UseTRPCQueryResult<Execution[], TRPCClientErrorLike<AppRouter>>;
};

export const EquityCurveRenderer = ({ backtests, executions }: EquityCurveRendererProps) => {
  const { theme } = useTheme();
  const isDarkTheme = theme === 'dark';

  const [backtestHistories, setBacktestHistories] = useState<
    {
      id: string;
      equity: { name: number; equity: Decimal }[];
      createdAt: Date;
    }[]
  >([]);
  const [executionHistories, setExecutionHistories] = useState<
    {
      id: string;
      equity: { name: number; equity: Decimal }[];
      createdAt: Date;
    }[]
  >([]);
  // const [chartData, setChartData] = useState<
  //   {
  //     name: number;
  //     equity: Decimal;
  //   }[]
  // >([]);
  const [isLoading, setLoading] = useState(true);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
	// heavy calculation
  }, [backtests.data]);

  useEffect(() => {
	// heavy calculation
  }, [executions.data]);

  const chartData = useMemo(
    () =>
      [...backtestHistories, ...executionHistories]
        .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
        .flatMap(({ equity }) => equity),
    [backtestHistories, executionHistories],
  );

  return (
    <div className="flex mx-auto max-w-[150px] h-[80px]">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={chartData}>
          <ReferenceLine y={chartData?.[0]?.equity.toNumber() || 0} stroke="black" />

          <YAxis domain={['dataMin', 'dataMax']} hide={true} />
          <Line
            type="monotone"
            dataKey="equity"
            dot={false}
            stroke={isDarkTheme ? '#00FC65' : '#FC9E26'}
            // stroke="#FC9E26"
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};