import React, { useState } from 'react'
import 'react-toastify/dist/ReactToastify.css'

import { BacktestCards, BacktestModal } from '../../components/organism'
import type { Backtest } from '../../generated/ManagingApi'

const BacktestPlayground: React.FC = () => {
  const [backtestingResult, setBacktest] = useState<Backtest[]>([])

  const [showModal, setShowModal] = useState(false)

  function openModal() {
    setShowModal(true)
  }

  function closeModal() {
    setShowModal(false)
  }

  return (
    <div className="container mx-auto">
      <button className="btn" onClick={openModal}>
        Run New Backtest
      </button>
      <BacktestCards list={backtestingResult} setBacktests={setBacktest} />
      <BacktestModal
        showModal={showModal}
        closeModal={closeModal}
        setBacktests={setBacktest}
      />
    </div>
  )
}

export default BacktestPlayground
