import { Bank, U64_MAX_BN } from '@blockworks-foundation/mango-v4'
import {
  PerpMarket,
  PerpOrder,
  PerpOrderType,
  Serum3Market,
  Serum3OrderType,
  Serum3SelfTradeBehavior,
  Serum3Side,
} from '@blockworks-foundation/mango-v4'
import Input from '@components/forms/Input'
import { IconButton } from '@components/shared/Button'
import ConnectEmptyState from '@components/shared/ConnectEmptyState'
import FormatNumericValue from '@components/shared/FormatNumericValue'
import Loading from '@components/shared/Loading'
import SheenLoader from '@components/shared/SheenLoader'
import SideBadge from '@components/shared/SideBadge'
import {
  SortableColumnHeader,
  Table,
  Td,
  Th,
  TrBody,
  TrHead,
} from '@components/shared/TableElements'
import Tooltip from '@components/shared/Tooltip'
import {
  CheckIcon,
  NoSymbolIcon,
  PencilIcon,
  TrashIcon,
  XMarkIcon,
} from '@heroicons/react/20/solid'
import { Order } from '@project-serum/serum/lib/market'
import { useWallet } from '@solana/wallet-adapter-react'
import { PublicKey } from '@solana/web3.js'
import mangoStore from '@store/mangoStore'
import useMangoAccount from 'hooks/useMangoAccount'
import useSelectedMarket from 'hooks/useSelectedMarket'
import useUnownedAccount from 'hooks/useUnownedAccount'
import useFilledOrders from 'hooks/useFilledOrders'
import { useViewport } from 'hooks/useViewport'
import { useTranslation } from 'next-i18next'
import Link from 'next/link'
import { ChangeEvent, Fragment, useCallback, useState } from 'react'
import { isMangoError } from 'types'
import { notify } from 'utils/notifications'
import { getDecimalCount } from 'utils/numbers'
import { breakpoints } from 'utils/theme'
import MarketLogos from './MarketLogos'
import PerpSideBadge from './PerpSideBadge'
import TableMarketName from './TableMarketName'
import { useSortableData } from 'hooks/useSortableData'
import { BN } from '@project-serum/anchor'
import NukeIcon from '@components/icons/NukeIcon'

type TableData = {
  expiryTimestamp: number | undefined
  filledQuantity: number
  market: Serum3Market | PerpMarket
  marketName: string
  minOrderSize: number
  order: Order | PerpOrder
  orderId: BN
  price: number
  side: string
  size: number
  tickSize: number
  value: number
}

export const findSerum3MarketPkInOpenOrders = (
  o: Order,
): string | undefined => {
  const openOrders = mangoStore.getState().mangoAccount.openOrders
  let foundedMarketPk: string | undefined = undefined
  for (const [marketPk, orders] of Object.entries(openOrders)) {
    for (const order of orders) {
      if (order.orderId.eq(o.orderId)) {
        foundedMarketPk = marketPk
        break
      }
    }
    if (foundedMarketPk) {
      break
    }
  }
  return foundedMarketPk
}

const OpenOrders = ({
  filterForCurrentMarket,
}: {
  filterForCurrentMarket?: boolean
}) => {
  const { t } = useTranslation(['common', 'trade'])
  const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
  const [cancelId, setCancelId] = useState<string>('')
  const [cancelAllMarket, setCancelAllMarket] = useState<string | number>('')
  const [modifyOrderId, setModifyOrderId] = useState<string | undefined>(
    undefined,
  )
  const [loadingModifyOrder, setLoadingModifyOrder] = useState(false)
  const [modifiedOrderSize, setModifiedOrderSize] = useState('')
  const [modifiedOrderPrice, setModifiedOrderPrice] = useState('')
  const { width } = useViewport()
  const showTableView = width ? width > breakpoints.md : false
  const { mangoAccountAddress } = useMangoAccount()
  const { connected } = useWallet()
  const { isUnownedAccount } = useUnownedAccount()
  const { selectedMarket } = useSelectedMarket()
  const { filledOrders, fetchingFilledOrders } = useFilledOrders()

  const handleCancelAllForSpotMarket = useCallback(
    async (o: Order) => {
      const client = mangoStore.getState().client
      const group = mangoStore.getState().group
      const mangoAccount = mangoStore.getState().mangoAccount.current
      if (!group || !mangoAccount) return
      const marketPk = findSerum3MarketPkInOpenOrders(o)
      if (!marketPk) return
      const market = group.getSerum3MarketByExternalMarket(
        new PublicKey(marketPk),
      )
      setCancelAllMarket(market.name)
      try {
        const { signature: tx } = await client.serum3CancelAllOrders(
          group,
          mangoAccount,
          market.serumMarketExternal,
        )
        const actions = mangoStore.getState().actions
        await actions.fetchOpenOrders(true)
        notify({
          type: 'success',
          title: 'Transaction successful',
          txid: tx,
        })
      } catch (e) {
        console.error('Error canceling', e)
        if (isMangoError(e)) {
          notify({
            title: t('trade:cancel-order-error'),
            description: e.message,
            txid: e.txid,
            type: 'error',
          })
        }
      } finally {
        setCancelAllMarket('')
      }
    },
    [t],
  )

  const handleCancelSerumOrder = useCallback(
    async (o: Order) => {
      const client = mangoStore.getState().client
      const group = mangoStore.getState().group
      const mangoAccount = mangoStore.getState().mangoAccount.current
      const actions = mangoStore.getState().actions
      if (!group || !mangoAccount) return
      const marketPk = findSerum3MarketPkInOpenOrders(o)
      if (!marketPk) return
      const market = group.getSerum3MarketByExternalMarket(
        new PublicKey(marketPk),
      )

      setCancelId(o.orderId.toString())
      try {
        const { signature: tx } = await client.serum3CancelOrder(
          group,
          mangoAccount,
          market!.serumMarketExternal,
          o.side === 'buy' ? Serum3Side.bid : Serum3Side.ask,
          o.orderId,
        )

        actions.fetchOpenOrders()
        notify({
          type: 'success',
          title: 'Transaction successful',
          txid: tx,
        })
      } catch (e) {
        console.error('Error canceling', e)
        if (isMangoError(e)) {
          notify({
            title: t('trade:cancel-order-error'),
            description: e.message,
            txid: e.txid,
            type: 'error',
          })
        }
      } finally {
        setCancelId('')
      }
    },
    [t],
  )

  const modifyOrder = useCallback(
    async (o: PerpOrder | Order) => {
      const client = mangoStore.getState().client
      const group = mangoStore.getState().group
      const mangoAccount = mangoStore.getState().mangoAccount.current
      const actions = mangoStore.getState().actions
      const baseSize = modifiedOrderSize ? Number(modifiedOrderSize) : o.size
      const price = modifiedOrderPrice ? Number(modifiedOrderPrice) : o.price
      if (!group || !mangoAccount) return
      setLoadingModifyOrder(true)
      try {
        let tx
        if (o instanceof PerpOrder) {
          tx = await client.modifyPerpOrder(
            group,
            mangoAccount,
            o.perpMarketIndex,
            o.orderId,
            o.side,
            price,
            Math.abs(baseSize),
            undefined, // maxQuoteQuantity
            Date.now(),
            PerpOrderType.limit,
            undefined,
            undefined,
          )
        } else {
          const marketPk = findSerum3MarketPkInOpenOrders(o)
          if (!marketPk) return
          const market = group.getSerum3MarketByExternalMarket(
            new PublicKey(marketPk),
          )
          tx = await client.modifySerum3Order(
            group,
            o.orderId,
            mangoAccount,
            market.serumMarketExternal,
            o.side === 'buy' ? Serum3Side.bid : Serum3Side.ask,
            price,
            baseSize,
            Serum3SelfTradeBehavior.decrementTake,
            Serum3OrderType.limit,
            Date.now(),
            10,
          )
        }
        actions.fetchOpenOrders()
        notify({
          type: 'success',
          title: 'Transaction successful',
          txid: tx.signature,
        })
      } catch (e) {
        console.error('Error canceling', e)
        if (isMangoError(e)) {
          notify({
            title: 'Unable to modify order',
            description: e.message,
            txid: e.txid,
            type: 'error',
          })
        }
      } finally {
        cancelEditOrderForm()
      }
    },
    [modifiedOrderSize, modifiedOrderPrice],
  )

  const handleCancelPerpOrder = useCallback(
    async (o: PerpOrder) => {
      const client = mangoStore.getState().client
      const group = mangoStore.getState().group
      const mangoAccount = mangoStore.getState().mangoAccount.current
      const actions = mangoStore.getState().actions
      if (!group || !mangoAccount) return
      setCancelId(o.orderId.toString())
      try {
        const { signature: tx } = await client.perpCancelOrder(
          group,
          mangoAccount,
          o.perpMarketIndex,
          o.orderId,
        )
        actions.fetchOpenOrders(true)
        notify({
          type: 'success',
          title: 'Transaction successful',
          txid: tx,
        })
      } catch (e) {
        console.error('Error canceling', e)
        if (isMangoError(e)) {
          notify({
            title: t('trade:cancel-order-error'),
            description: e.message,
            txid: e.txid,
            type: 'error',
          })
        }
      } finally {
        setCancelId('')
      }
    },
    [t],
  )

  const handleCancelAllPerpOrders = useCallback(
    async (o: PerpOrder) => {
      const client = mangoStore.getState().client
      const group = mangoStore.getState().group
      const mangoAccount = mangoStore.getState().mangoAccount.current
      const actions = mangoStore.getState().actions
      if (!group || !mangoAccount) return
      setCancelAllMarket(o.perpMarketIndex)
      try {
        const { signature: tx } = await client.perpCancelAllOrders(
          group,
          mangoAccount,
          o.perpMarketIndex,
          100,
        )
        await actions.fetchOpenOrders(true)
        notify({
          type: 'success',
          title: 'Transaction successful',
          txid: tx,
        })
      } catch (e) {
        console.error('Error canceling', e)
        if (isMangoError(e)) {
          notify({
            title: t('trade:cancel-order-error'),
            description: e.message,
            txid: e.txid,
            type: 'error',
          })
        }
      } finally {
        setCancelAllMarket('')
      }
    },
    [t],
  )

  const showEditOrderForm = (order: Order | PerpOrder, tickSize: number) => {
    setModifyOrderId(order.orderId.toString())
    setModifiedOrderSize(order.size.toString())
    setModifiedOrderPrice(order.price.toFixed(getDecimalCount(tickSize)))
  }
  const cancelEditOrderForm = () => {
    setModifyOrderId(undefined)
    setLoadingModifyOrder(false)
    setModifiedOrderSize('')
    setModifiedOrderPrice('')
  }

  const formattedTableData = useCallback(() => {
    const group = mangoStore.getState().group
    if (!group) return []
    const formatted: TableData[] = []

    Object.entries(openOrders)
      .sort()
      .filter((orders) => {
        if (filterForCurrentMarket) {
          const marketPk =
            selectedMarket instanceof Serum3Market
              ? selectedMarket.serumMarketExternal.toString()
              : selectedMarket?.publicKey.toString()
          return orders[0] === marketPk
        } else return orders
      })
      .map(([marketPk, orders]) => {
        for (const order of orders) {
          let market: PerpMarket | Serum3Market
          let tickSize: number
          let minOrderSize: number
          let expiryTimestamp: number | undefined
          let value: number
          let filledQuantity = 0
          if (order instanceof PerpOrder) {
            market = group.getPerpMarketByMarketIndex(order.perpMarketIndex)
            tickSize = market.tickSize
            minOrderSize = market.minOrderSize
            expiryTimestamp =
              order.expiryTimestamp === U64_MAX_BN
                ? 0
                : order.expiryTimestamp.toNumber()
            value = order.size * order.price

            // Find the filled perp order,
            // the api returns client order ids for perps, but PerpOrder[] only has orderId
            const mangoAccount = mangoStore.getState().mangoAccount.current
            const perpClientId = mangoAccount?.perpOpenOrders?.find((p) =>
              p.id.eq(order.orderId),
            )?.clientId
            if (perpClientId) {
              const filledOrder = filledOrders?.fills?.find(
                (f) => f.order_id == perpClientId.toString(),
              )
              filledQuantity = filledOrder ? filledOrder.quantity : 0
            }
          } else {
            market = group.getSerum3MarketByExternalMarket(
              new PublicKey(marketPk),
            )
            const serumMarket = group.getSerum3ExternalMarket(
              market.serumMarketExternal,
            )
            const quoteBank = group.getFirstBankByTokenIndex(
              market.quoteTokenIndex,
            )
            tickSize = serumMarket.tickSize
            minOrderSize = serumMarket.minOrderSize
            value = order.size * order.price * quoteBank.uiPrice
            const filledOrder = filledOrders?.fills?.find(
              (f) => order.orderId.toString() === f.order_id,
            )
            filledQuantity = filledOrder ? filledOrder.quantity : 0
          }
          const side =
            order instanceof PerpOrder
              ? 'bid' in order.side
                ? 'long'
                : 'short'
              : order.side
          const price = order.price
          const size = order.size
          const orderId = order.orderId
          const marketName = market.name

          const data = {
            expiryTimestamp,
            filledQuantity,
            market,
            marketName,
            minOrderSize,
            order,
            orderId,
            price,
            side,
            size,
            tickSize,
            value,
          }
          formatted.push(data)
        }
      })

    return formatted
  }, [filledOrders, filterForCurrentMarket, openOrders, selectedMarket])

  const {
    items: tableData,
    requestSort,
    sortConfig,
  } = useSortableData(formattedTableData())

  const ordersByMarket: { [key: string]: number } = {}
  // count the number of orders for each market
  tableData.forEach((data) => {
    const { market } = data
    ordersByMarket[market.name] = (ordersByMarket[market.name] || 0) + 1
  })

  return mangoAccountAddress && tableData.length ? (
    showTableView ? (
      <Table>
        <thead>
          <TrHead>
            <Th className="text-left">
              <SortableColumnHeader
                sortKey="marketName"
                sort={() => requestSort('marketName')}
                sortConfig={sortConfig}
                title={t('market')}
              />
            </Th>
            <Th>
              <div className="flex justify-end">
                <SortableColumnHeader
                  sortKey="size"
                  sort={() => requestSort('size')}
                  sortConfig={sortConfig}
                  title={t('trade:size')}
                />
              </div>
            </Th>
            <Th>
              <div className="flex justify-end">
                <SortableColumnHeader
                  sortKey="price"
                  sort={() => requestSort('price')}
                  sortConfig={sortConfig}
                  title={t('price')}
                />
              </div>
            </Th>
            <Th>
              <div className="flex justify-end">
                <SortableColumnHeader
                  sortKey="filledQuantity"
                  sort={() => requestSort('filledQuantity')}
                  sortConfig={sortConfig}
                  title={t('trade:filled')}
                />
              </div>
            </Th>
            <Th>
              <div className="flex justify-end">
                <SortableColumnHeader
                  sortKey="value"
                  sort={() => requestSort('value')}
                  sortConfig={sortConfig}
                  title={t('value')}
                />
              </div>
            </Th>
            {!isUnownedAccount ? (
              <Th className="w-[16.67%] text-right" />
            ) : null}
          </TrHead>
        </thead>
        <tbody>
          {tableData.map((data, index) => {
            const {
              expiryTimestamp,
              filledQuantity,
              market,
              minOrderSize,
              order,
              orderId,
              price,
              side,
              size,
              tickSize,
              value,
            } = data

            const isFirstOrderForMarket =
              ordersByMarket[market.name] > 1 &&
              index ===
                tableData.findIndex((item) => item.market.name === market.name)

            const loadingCancel =
              cancelAllMarket === market.name ||
              (order instanceof PerpOrder &&
                cancelAllMarket === order.perpMarketIndex)
            return (
              <TrBody
                key={`${side}${size}${price}${orderId.toString()}`}
                className="my-1 p-2"
              >
                <Td className="w-[16.67%]">
                  <TableMarketName market={market} side={side} />
                </Td>
                {modifyOrderId !== orderId.toString() ? (
                  <>
                    <Td className="w-[16.67%] text-right font-mono">
                      <FormatNumericValue
                        value={size}
                        decimals={getDecimalCount(minOrderSize)}
                      />
                    </Td>
                    <Td className="w-[16.67%] whitespace-nowrap text-right font-mono">
                      <FormatNumericValue
                        value={price}
                        decimals={getDecimalCount(tickSize)}
                      />
                    </Td>
                  </>
                ) : (
                  <>
                    <Td className="w-[16.67%]">
                      <input
                        className="h-8 w-full rounded-none border-x-0 border-b-2 border-t-0 border-th-bkg-4 bg-transparent px-0 text-right font-mono text-sm hover:border-th-fgd-3 focus:border-th-fgd-3 focus:outline-none"
                        type="text"
                        value={modifiedOrderSize}
                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
                          setModifiedOrderSize(e.target.value)
                        }
                      />
                    </Td>
                    <Td className="w-[16.67%]">
                      <input
                        autoFocus
                        className="h-8 w-full rounded-none border-x-0 border-b-2 border-t-0 border-th-bkg-4 bg-transparent px-0 text-right font-mono text-sm hover:border-th-fgd-3 focus:border-th-fgd-3 focus:outline-none"
                        type="text"
                        value={modifiedOrderPrice}
                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
                          setModifiedOrderPrice(e.target.value)
                        }
                      />
                    </Td>
                  </>
                )}
                <Td className="w-[16.67%] text-right font-mono">
                  {fetchingFilledOrders ? (
                    <div className="flex justify-end">
                      <SheenLoader className="flex justify-end">
                        <div className="h-4 w-8 bg-th-bkg-2" />
                      </SheenLoader>
                    </div>
                  ) : (
                    <FormatNumericValue
                      value={filledQuantity}
                      decimals={getDecimalCount(minOrderSize)}
                    />
                  )}
                </Td>
                <Td className="w-[16.67%] text-right font-mono">
                  <FormatNumericValue value={value} isUsd />
                  {expiryTimestamp ? (
                    <div className="h-min text-xxs leading-tight text-th-fgd-4">{`Expires ${new Date(
                      expiryTimestamp * 1000,
                    ).toLocaleTimeString()}`}</div>
                  ) : null}
                </Td>
                {!isUnownedAccount ? (
                  <>
                    <Td className="w-[16.67%]">
                      <div className="flex w-full justify-end">
                        <div className="flex justify-start space-x-2">
                          {modifyOrderId !== orderId.toString() ? (
                            <>
                              <IconButton
                                onClick={() =>
                                  showEditOrderForm(order, tickSize)
                                }
                                size="small"
                              >
                                <PencilIcon className="h-4 w-4" />
                              </IconButton>
                              <Tooltip content={t('cancel')}>
                                <IconButton
                                  disabled={cancelId === orderId.toString()}
                                  onClick={() =>
                                    order instanceof PerpOrder
                                      ? handleCancelPerpOrder(order)
                                      : handleCancelSerumOrder(order)
                                  }
                                  size="small"
                                >
                                  {cancelId === orderId.toString() ||
                                  loadingCancel ? (
                                    <Loading className="h-4 w-4" />
                                  ) : (
                                    <TrashIcon className="h-4 w-4" />
                                  )}
                                </IconButton>
                              </Tooltip>
                              {isFirstOrderForMarket ? (
                                <Tooltip
                                  content={t('trade:cancel-all-orders', {
                                    market: market.name,
                                  })}
                                >
                                  <IconButton
                                    disabled={loadingCancel}
                                    onClick={() =>
                                      order instanceof PerpOrder
                                        ? handleCancelAllPerpOrders(order)
                                        : handleCancelAllForSpotMarket(order)
                                    }
                                    size="small"
                                  >
                                    <NukeIcon className="h-4 w-4" />
                                  </IconButton>
                                </Tooltip>
                              ) : (
                                <div className="h-8 w-8" />
                              )}
                            </>
                          ) : (
                            <>
                              <IconButton
                                onClick={() => modifyOrder(order)}
                                size="small"
                              >
                                {loadingModifyOrder ? (
                                  <Loading className="h-4 w-4" />
                                ) : (
                                  <CheckIcon className="h-4 w-4" />
                                )}
                              </IconButton>
                              <IconButton
                                onClick={cancelEditOrderForm}
                                size="small"
                              >
                                <XMarkIcon className="h-4 w-4" />
                              </IconButton>
                              <div className="h-8 w-8" />
                            </>
                          )}
                        </div>
                      </div>
                    </Td>
                  </>
                ) : null}
              </TrBody>
            )
          })}
        </tbody>
      </Table>
    ) : (
      <div>
        {tableData.map((data, index) => {
          const {
            expiryTimestamp,
            market,
            minOrderSize,
            order,
            orderId,
            price,
            side,
            size,
            tickSize,
            value,
          } = data

          let quoteBank: Bank | undefined
          const group = mangoStore.getState().group
          if (market instanceof Serum3Market && group) {
            const externalMarket = group.getSerum3MarketByExternalMarket(
              market.serumMarketExternal,
            )
            quoteBank = group.getFirstBankByTokenIndex(
              externalMarket.quoteTokenIndex,
            )
          }
          const isFirstOrderForMarket =
            ordersByMarket[market.name] > 1 &&
            index ===
              tableData.findIndex((item) => item.market.name === market.name)
          const loadingCancel =
            cancelAllMarket === market.name ||
            (order instanceof PerpOrder &&
              cancelAllMarket === order.perpMarketIndex)
          return (
            <div
              className="flex items-center justify-between border-b border-th-bkg-3 p-4"
              key={`${side}${size}${price}${orderId.toString()}`}
            >
              <div>
                {modifyOrderId !== orderId.toString() ? (
                  <div className="flex items-center">
                    <MarketLogos market={market} size="large" />
                    <div>
                      <div className="flex space-x-1 text-th-fgd-2">
                        {selectedMarket?.name === market.name ? (
                          <span className="whitespace-nowrap">
                            {market.name}
                          </span>
                        ) : (
                          <Link href={`/trade?name=${market.name}`}>
                            <span className="whitespace-nowrap">
                              {market.name}
                            </span>
                          </Link>
                        )}
                        {order instanceof PerpOrder ? (
                          <PerpSideBadge
                            basePosition={'bid' in order.side ? 1 : -1}
                          />
                        ) : (
                          <SideBadge side={side} />
                        )}
                      </div>
                      <p className="text-th-fgd-4">
                        <span className="font-mono text-th-fgd-2">
                          <FormatNumericValue
                            value={size}
                            decimals={getDecimalCount(minOrderSize)}
                          />
                        </span>
                        {' at '}
                        <span className="font-mono text-th-fgd-2">
                          <FormatNumericValue
                            value={price}
                            decimals={getDecimalCount(tickSize)}
                            isUsd={
                              quoteBank?.name === 'USDC' ||
                              order instanceof PerpOrder
                            }
                          />{' '}
                          {quoteBank && quoteBank.name !== 'USDC' ? (
                            <span className="font-body text-th-fgd-3">
                              {quoteBank.name}
                            </span>
                          ) : null}
                        </span>
                      </p>
                      <span className="font-mono text-xs text-th-fgd-3">
                        <FormatNumericValue value={value} isUsd />
                      </span>
                      {expiryTimestamp ? (
                        <div className="h-min text-xxs leading-tight text-th-fgd-4">{`Expires ${new Date(
                          expiryTimestamp * 1000,
                        ).toLocaleTimeString()}`}</div>
                      ) : null}
                    </div>
                  </div>
                ) : (
                  <>
                    <p className="text-th-fgd-2">{`${t('edit')} ${
                      market.name
                    } ${t('order')}`}</p>
                    <div className="mt-2 flex space-x-4">
                      <div>
                        <p className="text-xs">{t('trade:size')}</p>
                        <Input
                          className="w-full rounded-none border-x-0 border-b-2 border-t-0 border-th-bkg-4 bg-transparent px-0 text-right font-mono hover:border-th-fgd-3 focus:border-th-fgd-3 focus:outline-none"
                          type="text"
                          value={modifiedOrderSize}
                          onChange={(e: ChangeEvent<HTMLInputElement>) =>
                            setModifiedOrderSize(e.target.value)
                          }
                        />
                      </div>
                      <div>
                        <p className="text-xs">{t('price')}</p>
                        <Input
                          autoFocus
                          className="w-full rounded-none border-x-0 border-b-2 border-t-0 border-th-bkg-4 bg-transparent px-0 text-right font-mono hover:border-th-fgd-3 focus:border-th-fgd-3 focus:outline-none"
                          type="text"
                          value={modifiedOrderPrice}
                          onChange={(e: ChangeEvent<HTMLInputElement>) =>
                            setModifiedOrderPrice(e.target.value)
                          }
                        />
                      </div>
                    </div>
                  </>
                )}
              </div>
              {!isUnownedAccount ? (
                <div className="flex items-center space-x-3 pl-8">
                  <div className="flex items-center space-x-2">
                    {modifyOrderId !== orderId.toString() ? (
                      <>
                        <IconButton
                          onClick={() => showEditOrderForm(order, tickSize)}
                          size="small"
                        >
                          <PencilIcon className="h-4 w-4" />
                        </IconButton>
                        <IconButton
                          disabled={cancelId === orderId.toString()}
                          onClick={() =>
                            order instanceof PerpOrder
                              ? handleCancelPerpOrder(order)
                              : handleCancelSerumOrder(order)
                          }
                          size="small"
                        >
                          {cancelId === orderId.toString() || loadingCancel ? (
                            <Loading className="h-4 w-4" />
                          ) : (
                            <TrashIcon className="h-4 w-4" />
                          )}
                        </IconButton>
                        {isFirstOrderForMarket ? (
                          <Tooltip
                            content={t('trade:cancel-all-orders', {
                              market: market.name,
                            })}
                          >
                            <IconButton
                              disabled={loadingCancel}
                              onClick={() =>
                                order instanceof PerpOrder
                                  ? handleCancelAllPerpOrders(order)
                                  : handleCancelAllForSpotMarket(order)
                              }
                              size="small"
                            >
                              <NukeIcon className="h-4 w-4" />
                            </IconButton>
                          </Tooltip>
                        ) : null}
                      </>
                    ) : (
                      <>
                        <IconButton
                          onClick={() => modifyOrder(order)}
                          size="small"
                        >
                          {loadingModifyOrder ? (
                            <Loading className="h-4 w-4" />
                          ) : (
                            <CheckIcon className="h-4 w-4" />
                          )}
                        </IconButton>
                        <IconButton onClick={cancelEditOrderForm} size="small">
                          <XMarkIcon className="h-4 w-4" />
                        </IconButton>
                      </>
                    )}
                  </div>
                </div>
              ) : null}
            </div>
          )
        })}
      </div>
    )
  ) : mangoAccountAddress || connected ? (
    <div className="flex flex-1 flex-col items-center justify-center">
      <div className="flex flex-col items-center p-8">
        <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
        <p>{t('trade:no-orders')}</p>
      </div>
    </div>
  ) : (
    <div className="flex flex-1 flex-col items-center justify-center p-8">
      <ConnectEmptyState text={t('trade:connect-orders')} />
    </div>
  )
}

export default OpenOrders
