import React, {useState} from 'react'

import 'react-toastify/dist/ReactToastify.css'
import {Tabs} from '../../components/mollecules'
import type {TabsType} from '../../global/type'

import BacktestLoop from './backtestLoop'
import BacktestPlayground from './backtestPlayground'
import BacktestScanner from './backtestScanner'
import BacktestUpload from './backtestUpload'

// Tabs Array
const tabs: TabsType = [
  {
    Component: BacktestPlayground,
    index: 1,
    label: 'Playground',
  },
  {
    Component: BacktestScanner,
    index: 2,
    label: 'Scanner',
  },
  {
    Component: BacktestLoop,
    index: 3,
    label: 'Loop',
  },
  {
    Component: BacktestUpload,
    index: 4,
    label: 'Upload',
  },
]

const Backtest: React.FC = () => {
  const [selectedTab, setSelectedTab] = useState<number>(tabs[0].index)

  return (
    <div className="container">
      <Tabs selectedTab={selectedTab} onClick={setSelectedTab} tabs={tabs} />
    </div>
  )
}

export default Backtest
