import {ChartBarIcon, EyeIcon, PlayIcon, PlusCircleIcon, StopIcon, TrashIcon} from '@heroicons/react/solid'
import React, {useState} from 'react'

import useApiUrlStore from '../../app/store/apiStore'
import {CardPosition, CardSignal, CardText, Toast,} from '../../components/mollecules'
import ManualPositionModal from '../../components/mollecules/ManualPositionModal'
import TradesModal from '../../components/mollecules/TradesModal/TradesModal'
import {TradeChart} from '../../components/organism'
import type {BotType, MoneyManagement, TradingBot,} from '../../generated/ManagingApi'
import {BotClient} from '../../generated/ManagingApi'
import type {IBotList} from '../../global/type'
import MoneyManagementModal from '../settingsPage/moneymanagement/moneyManagementModal'

function baseBadgeClass(isOutlined = false) {
  let classes = 'text-xs badge '

  if (isOutlined) {
    classes += 'badge-outline '
  }
  return classes
}

function cardClasses(botStatus: string) {
  const classes =
    'card bg-base-300 shadow-md ' + (botStatus == 'Up' ? 'shadow-success' : '')

  return classes
}

const BotList: React.FC<IBotList> = ({ list }) => {
  const { apiUrl } = useApiUrlStore()
  const client = new BotClient({}, apiUrl)
  const [showMoneyManagementModal, setShowMoneyManagementModal] =
    useState(false)
  const [selectedMoneyManagement, setSelectedMoneyManagement] =
    useState<MoneyManagement>()
  const [showManualPositionModal, setShowManualPositionModal] = useState(false)
  const [selectedBotForManualPosition, setSelectedBotForManualPosition] = useState<string | null>(null)
  const [showTradesModal, setShowTradesModal] = useState(false)
  const [selectedBotForTrades, setSelectedBotForTrades] = useState<string | null>(null)

  function getIsForWatchingBadge(isForWatchingOnly: boolean, name: string) {
    const classes =
      baseBadgeClass() + (isForWatchingOnly ? ' bg-accent' : ' bg-primary')
    return (
      <button className={classes} onClick={() => toggleIsForWatchingOnly(name)}>
        {isForWatchingOnly ? (
          <p className="text-accent-content flex">
            <EyeIcon width={12}></EyeIcon>
            Watch Only
          </p>
        ) : (
          <p className="text-primary-content flex">
            <PlayIcon width={12}></PlayIcon>
            Trading
          </p>
        )}
      </button>
    )
  }

  function toggleIsForWatchingOnly(name: string) {
    const t = new Toast('Switch watch only')
    client.bot_ToggleIsForWatching(name).then(() => {
      t.update('success', 'Bot updated')
    })
  }
  function getDeleteBadge(name: string) {
    const classes = baseBadgeClass() + 'bg-error'
    return (
      <button className={classes} onClick={() => deleteBot(name)}>
        <p className="text-primary-content flex">
          <TrashIcon width={15}></TrashIcon>
        </p>
      </button>
    )
  }
  function getToggleBotStatusBadge(
    status: string,
    name: string,
    botType: BotType
  ) {
    const classes =
      baseBadgeClass() + (status == 'Up' ? ' bg-error' : ' bg-success')
    return (
      <button
        className={classes}
        onClick={() => toggleBotStatus(status, name, botType)}
      >
        {status == 'Up' ? (
          <p className="text-accent-content flex">
            <StopIcon width={15}></StopIcon>
          </p>
        ) : (
          <p className="text-primary-content flex">
            <PlayIcon width={15}></PlayIcon>
          </p>
        )}
      </button>
    )
  }

  function getMoneyManagementBadge(moneyManagement: MoneyManagement) {
    const classes = baseBadgeClass() + ' bg-primary'
    return (
      <button
        className={classes}
        onClick={() => {
          setSelectedMoneyManagement(moneyManagement)
          setShowMoneyManagementModal(true)
        }}
      >
        <p className="text-primary-content flex">
          <EyeIcon width={15}></EyeIcon>
          MoneyManagement
        </p>
      </button>
    )
  }

  function getManualPositionBadge(botName: string) {
    const classes = baseBadgeClass() + ' bg-info'
    return (
      <button className={classes} onClick={() => openManualPositionModal(botName)}>
         <p className="text-primary-content flex">
            <PlusCircleIcon width={15}></PlusCircleIcon>
         </p>
      </button>
    )
  }

  function getTradesBadge(botName: string) {
    const classes = baseBadgeClass() + ' bg-secondary'
    return (
      <button className={classes} onClick={() => openTradesModal(botName)}>
         <p className="text-primary-content flex">
            <ChartBarIcon width={15}></ChartBarIcon>
         </p>
      </button>
    )
  }

  function openManualPositionModal(botName: string) {
    setSelectedBotForManualPosition(botName)
    setShowManualPositionModal(true)
  }

  function openTradesModal(botName: string) {
    setSelectedBotForTrades(botName)
    setShowTradesModal(true)
  }

  function toggleBotStatus(status: string, name: string, botType: BotType) {
    const isUp = status == 'Up'
    const t = new Toast(isUp ? 'Stoping bot' : 'Restarting bot')

    if (status == 'Up') {
      client
        .bot_Stop(botType, name)
        .then(() => {
          t.update('success', 'Bot stopped')
        })
        .catch((err) => {
          t.update('error', err)
        })
    } else if (status == 'Down') {
      client
        .bot_Restart(botType, name)
        .then(() => {
          t.update('success', 'Bot up')
        })
        .catch((err) => {
          t.update('error', err)
        })
    }
  }

  function deleteBot(name: string) {
    const t = new Toast('Deleting bot')

    client
      .bot_Delete(name)
      .then(() => {
        t.update('success', 'Bot deleted')
      })
      .catch((err) => {
        t.update('error', err)
      })
  }

  return (
    <div className="flex flex-wrap m-4 -mx-4">
      {list.map((bot: TradingBot, index) => (
        <div
          key={index.toString()}
          className="sm:w-1 md:w-1/2 xl:w-1/2 w-full p-2"
        >
          <div className={cardClasses(bot.status)}>
            <figure>
              {
                <TradeChart
                  candles={bot.candles}
                  positions={bot.positions}
                  signals={bot.signals}
                  width={510}
                  height={300}
                ></TradeChart>
              }
            </figure>
            <div className="card-body">
              <h2 className="card-title text-sm">
                {bot.ticker}
                {getMoneyManagementBadge(bot.moneyManagement)}
                {getIsForWatchingBadge(bot.isForWatchingOnly, bot.name)}
                {getToggleBotStatusBadge(bot.status, bot.name, bot.botType)}
                {getManualPositionBadge(bot.name)}
                {getDeleteBadge(bot.name)}
              </h2>
             

              <div className="columns-2">
                <div>
                  <div>
                    <CardText
                      title="Scenario"
                      content={bot.scenario}
                    ></CardText>
                  </div>
                </div>
              </div>
              <div className="columns-2">
                <CardSignal signals={bot.signals}></CardSignal>
                <CardText title="Type" content={bot.botType}></CardText>
              </div>
              <div className="columns-2">
                <CardPosition
                  positivePosition={true}
                  positions={bot.positions.filter((p) => {
                    const realized = p.profitAndLoss?.realized ?? 0
                    return realized > 0 ? p : null
                  })}
                ></CardPosition>
                <CardPosition
                  positivePosition={false}
                  positions={bot.positions.filter((p) => {
                    const realized = p.profitAndLoss?.realized ?? 0
                    return realized <= 0 ? p : null
                  })}
                ></CardPosition>
              </div>
              <div className="text-sm">
                <div className="card-actions justify-center pt-2">
                  <div className={baseBadgeClass(true)}>
                    WR {bot.winRate?.toFixed(2).toString()} %
                  </div>
                  <div className={baseBadgeClass(true)}>
                    PNL {bot.profitAndLoss.toFixed(2).toString()} $
                  </div>
                  {getTradesBadge(bot.name)}
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}

      <MoneyManagementModal
        showModal={showMoneyManagementModal}
        moneyManagement={selectedMoneyManagement}
        onClose={() => setShowMoneyManagementModal(false)}
        disableInputs={true}
      />
      <ManualPositionModal
        showModal={showManualPositionModal}
        botName={selectedBotForManualPosition}
        onClose={() => {
          setShowManualPositionModal(false)
          setSelectedBotForManualPosition(null)
        }}
      />
      <TradesModal
        showModal={showTradesModal}
        botName={selectedBotForTrades}
        onClose={() => {
          setShowTradesModal(false)
          setSelectedBotForTrades(null)
        }}
      />
    </div>
  )
}

export default BotList
