// type TradeDetailsStepProps = {}

import {
  dispatchToast,
  FlexContainer,
  InformationBar,
} from "@/components/shared/components"
import AmountSlider, { AmountSliderProps } from "../../AmountSlider"
import DurationInput from "../../DurationInput"
import useAutomationAgentStore from "@/components/swap-agent/store"
import SlippageSelector from "../../SlippageSelector"
import { useIsMobile } from "@/hooks/use-is-mobile"
import {
  calculateAutomationEvery,
  formatDurationToHumanReadable,
} from "@/components/swap-agent/utils"
import { formatAmountWithOptions } from "@/utils"

export default function TradeDetailsStep({
  amount,
  logo,
  onMaxTradeAmountSet,
  symbol,
  assetPrice,
}: AmountSliderProps) {
  const { selectedAgent, updateAgentData, automationAgentData } =
    useAutomationAgentStore()
  const { duration, selectedSlippage, slippage, tradeSizeAmount } =
    automationAgentData[selectedAgent]

  const removeHours = (hour: number) => {
    if (duration - hour < 3) {
      dispatchToast({
        title: "Duration cannot be below 3 hours",
        id: "error",
        type: "error",
      })
      return
    }
    updateAgentData(selectedAgent, { duration: duration - hour })
  }

  const isMobile = useIsMobile()

  const formattedDuration = calculateAutomationEvery(
    amount,
    assetPrice,
    duration,
    tradeSizeAmount,
  ) // returns seconds

  const formattedDurationString =
    formatDurationToHumanReadable(formattedDuration)

  return (
    <FlexContainer
      gap={4}
      style={{
        minWidth: isMobile ? "26rem" : "56rem",
        paddingBottom: isMobile ? "10rem" : "0rem",
      }}
      flexDirection="column"
      opacityInEffect
    >
      <AmountSlider
        assetPrice={assetPrice}
        amount={amount}
        logo={logo}
        symbol={symbol}
        onMaxTradeAmountSet={onMaxTradeAmountSet}
      />
      <DurationInput
        hours={duration}
        onAddHours={(hour) =>
          updateAgentData(selectedAgent, { duration: duration + hour })
        }
        onRemoveHours={removeHours}
      />
      <SlippageSelector
        onSetSelectedSlippage={(value) =>
          updateAgentData(selectedAgent, {
            selectedSlippage: value,
            slippage: "0",
          })
        }
        onSetSlippage={(value) => {
          updateAgentData(selectedAgent, { slippage: value })
        }}
        selectedSlippage={selectedSlippage}
        slippage={slippage}
      />

      <InformationBar style={{ border: "none", padding: "0" }} accent="warning">
        The agent can {selectedAgent === "SURGE" ? "Buy" : "Sell"} up to{" "}
        {formatAmountWithOptions(tradeSizeAmount, { maximumFractionDigits: 6 })}{" "}
        {symbol}&nbsp;every {formattedDurationString}
      </InformationBar>
    </FlexContainer>
  )
}