import {
  ContentWrapper,
  FlexContainer,
  SwapInput,
  Typography,
} from "@/components/shared/components"

import { TAsset } from "@/types"
import { formatUnits } from "@/utils"

type DepositSectionProps = {
  isTokenAlreadyDeposited: boolean
  alreadyDepositedValue: bigint
  tokenAmount: string
  setTokenAmount: (value: string) => void
  tokenConfig: TAsset
  maxAvailableValue: bigint
  minDepositAmount: number
  showMinAmountWarning: boolean
}

export default function MinimalDepositView({
  alreadyDepositedValue,
  isTokenAlreadyDeposited,
  setTokenAmount,
  tokenAmount,
  tokenConfig,
  maxAvailableValue,
  minDepositAmount,
  showMinAmountWarning,
}: DepositSectionProps) {
  const { name, decimals } = tokenConfig

  return (
    <ContentWrapper>
      <FlexContainer
        width={100}
        justifyContent="space-between"
        alignItems="center"
      >
        <Typography type="BODY_MEDIUM_S">Deposit</Typography>
      </FlexContainer>

      <FlexContainer flexDirection="column">
        <SwapInput
          showInputPresets={!isTokenAlreadyDeposited}
          disabled={true}
          inputDisabled={isTokenAlreadyDeposited}
          inputValue={
            isTokenAlreadyDeposited
              ? formatUnits(alreadyDepositedValue.toString(), decimals)
              : tokenAmount
          }
          setInputValue={setTokenAmount}
          selectedAsset={tokenConfig}
          setSelectedAsset={() => ({})}
          getMaxTokenBalanceAvailable={maxAvailableValue}
          availableAssets={[]}
          warningText={
            showMinAmountWarning
              ? `You need at least ${minDepositAmount} ${name} to launch an Agent.`
              : undefined
          }
        />
      </FlexContainer>
    </ContentWrapper>
  )
}