import { TradeChart, CardPositionItem } from '..'
import { Backtest, MoneyManagement } from '../../../generated/ManagingApi'
import { CardPosition, CardText } from '../../mollecules'

interface IBacktestRowDetailsProps {
  backtest: Backtest;
  optimizedMoneyManagement: {
    stopLoss: number;
    takeProfit: number;
  };
}

const BacktestRowDetails: React.FC<IBacktestRowDetailsProps> = ({
  backtest,
  optimizedMoneyManagement
}) => {
  const {
    candles,
    positions,
    walletBalances,
    strategiesValues,
    signals,
    statistics,
    moneyManagement
  } = backtest;

  return (
    <>
      <div className="grid grid-flow-row">
        <div className="grid grid-cols-4 p-5">
          <CardPosition
            positivePosition={true}
            positions={positions.filter((p) => {
              const realized = p.profitAndLoss?.realized ?? 0
              return realized > 0 ? p : null
            })}
          ></CardPosition>
          <CardPosition
            positivePosition={false}
            positions={positions.filter((p) => {
              const realized = p.profitAndLoss?.realized ?? 0
              return realized <= 0 ? p : null
            })}
          ></CardPosition>
          <CardPositionItem positions={positions}></CardPositionItem>
          <CardText
            title="Max Drowdown"
            content={
              statistics.maxDrawdown?.toFixed(4).toString() +
              '$'
            }
          ></CardText>
          <CardText
            title="Sharpe Ratio"
            content={
              (statistics.sharpeRatio
                ? statistics.sharpeRatio * 100
                : 0
              )
                .toFixed(4)
                .toString() + '%'
            }
          ></CardText>
          <CardText
            title="Max Drawdown Recovery Time"
            content={
              statistics.maxDrawdownRecoveryTime?.toString() +
              ' days'
            }
          ></CardText>
          <CardText
            title="Money Management"
            content={
              "SL: " +(moneyManagement?.stopLoss * 100).toFixed(2) + "% TP: " + 
              (moneyManagement?.takeProfit * 100).toFixed(2) + "%"
            }
          ></CardText>
          <CardText
            title="Optimized Money Management"
            content={
              "SL: " + backtest.optimizedMoneyManagement?.stopLoss.toFixed(2) + "% TP: " + backtest.optimizedMoneyManagement?.takeProfit.toFixed(2) + "%"
            }
          ></CardText>
         
   
        </div>
        <div>
          <figure>
            <TradeChart
              width={1400}
              height={1100}
              candles={candles}
              positions={positions}
              walletBalances={walletBalances}
              strategiesValues={strategiesValues}
              signals={signals}
            ></TradeChart>
          </figure>
        </div>
      </div>
    </>
  )
}

export default BacktestRowDetails
