import React, { useEffect, useMemo } from "react"
import { useAccount } from "wagmi"

import assetsList from "@/baseNew.json"
import { FlexContainer } from "@/components/shared/components"
import useConfigStore from "@/components/shared/store"
import { Address } from "@/components/shared/types"
import { SupportedChainIds } from "@/types"
import SwapAgentTabs from "../../SwapAgentTabs"
import { SwapAgentTab } from "../../types"
import AutomationHistoryItemsView from "../AutomationHistoryItemsView"
import useAutomationAgent from "../hooks/useAutomationAgent"
import NavigationButtons from "../NavigationButtons"
import PermissionModal from "../PermissionModal"

export default function AgentLayout() {
  const { address } = useAccount()
  const {
    automations,
    currentTab,
    goToNextStep,
    goToPreviousStep,
    stepData,
    currentStep,
    resetAgentsData,
    permissionModalData,
  } = useAutomationAgent()

  const { setAssets, assets } = useConfigStore()

  const { component, isNextButtonDisabled, nextButtonCallback } = stepData

  const hideTabsSecton = currentStep === "LOADING_SELECT_AGENT_ANIMATION"

  const hideNavigationButton =
    currentStep === "SELECT_AGENT" ||
    currentStep === "LOADING_SELECT_AGENT_ANIMATION"

  const tabView = useMemo(() => {
    switch (currentTab) {
      case SwapAgentTab.NEW_AGENT: {
        return (
          <React.Fragment>
            {component}
            {!hideNavigationButton && (
              <NavigationButtons
                onResetClick={resetAgentsData}
                showResetView={currentStep === "RUNNING"}
                isNextButtonHidden={currentStep === "FOUR"}
                nextClick={() => {
                  goToNextStep()
                  nextButtonCallback && nextButtonCallback()
                }}
                prevClick={goToPreviousStep}
                isNextButtonDisabled={!!isNextButtonDisabled}
              />
            )}
          </React.Fragment>
        )
      }

      case SwapAgentTab.ACTIVE: {
        return (
          <AutomationHistoryItemsView
            automations={automations.activeAutomations}
            automationsLoading={automations.loading}
          />
        )
      }

      case SwapAgentTab.HISTORY: {
        return (
          <AutomationHistoryItemsView
            automations={automations.historyAutomations}
            automationsLoading={automations.loading}
          />
        )
      }
    }
  }, [
    automations.activeAutomations,
    automations.historyAutomations,
    automations.loading,
    component,
    currentStep,
    currentTab,
    goToNextStep,
    goToPreviousStep,
    hideNavigationButton,
    isNextButtonDisabled,
    nextButtonCallback,
    resetAgentsData,
  ])

  useEffect(() => {
    resetAgentsData()
  }, [address, resetAgentsData])

  useEffect(() => {
    if (assets.length > 0) return
    const mappedAssets = assetsList.map((cAsset) => ({
      ...cAsset,
      chainId: cAsset.chainId as SupportedChainIds,
      address: cAsset.address as Address,
      verified: cAsset.isVerified,
      actions: [],
      value: "0",
      prices: { default: 0 },
    }))
    setAssets(mappedAssets)
  }, [assets.length, setAssets])

  return (
    <FlexContainer
      alignItems="center"
      gap={4}
      width={100}
      flexDirection="column"
    >
      {!hideTabsSecton && !!address && <SwapAgentTabs />}
      {tabView}

      {permissionModalData.isShowingModal && <PermissionModal />}
    </FlexContainer>
  )
}