import React, { useState } from 'react'

import { BacktestTable } from '../../components/organism'
import BacktestModal from '../../components/organism/Backtest/backtestModal'
import type { Backtest } from '../../generated/ManagingApi'

const BacktestLoop: React.FC = () => {
  const [backtestingResult, setBacktestingResult] = 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 optimized loop
      </button>
      <BacktestTable list={backtestingResult} isFetching={false} />
      <BacktestModal
        showModal={showModal}
        closeModal={closeModal}
        setBacktests={setBacktestingResult}
        showLoopSlider={true}
      />
    </div>
  )
}

export default BacktestLoop
