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

interface IBotRowDetailsProps {
  bot: TradingBotResponse;
}

const BotRowDetails: React.FC<IBotRowDetailsProps> = ({
  bot
}) => {
  if (!bot) {

    return <div>No bot data available</div>;
  }

  const {
    candles,
    positions,
    signals,
    config,
    agentName
  } = bot;

  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="Money Management"
            content={
              "SL: " +(config.moneyManagement?.stopLoss * 100).toFixed(2) + "% TP: " + 
              (config.moneyManagement?.takeProfit * 100).toFixed(2) + "%"
            }
          ></CardText>
   
        </div>
        <div>
          <figure>
            <TradeChart
              width={1400}
              height={1100}
              candles={candles}
              positions={positions}
              signals={signals}
            ></TradeChart>
          </figure>
        </div>
      </div>
    </>
  )
}

export default BotRowDetails
