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

import UnifiedTradingModal from '../../components/organism/UnifiedTradingModal'
import type {Backtest} from '../../generated/ManagingApi'

const BacktestLoop: 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 Backtest with Loop
      </button>
      <UnifiedTradingModal
        mode="backtest"
        showModal={showModal}
        closeModal={closeModal}
        setBacktests={setBacktest}
        showLoopSlider={true}
      />
    </div>
  )
}

export default BacktestLoop
