import {
  Block,
  Button,
  LogOut01,
  Settings01,
  useStyletron,
} from "@mezo-org/mezo-clay"
import React, { useCallback } from "react"
import { useDisconnect } from "wagmi"
import { useSignOut } from "../../../hooks"
import WalletAddress from "./WalletAddress"
import AccountBalance from "./AccountBalance"
import WelcomeBlock from "./WelcomeBlock"
import AccountAddressActions from "./AccountAddressActions"
import AccountOtherAssets from "./AccountOtherAssets"
import AccountBtcListing from "./AccountBtcListing"
import AccountMusdListing from "./AccountMusdListing"
import AccountMezoListing from "./AccountMezoListing"
import useDropdownStore, { DropdownView } from "../../../stores/dropdownStore"

type RootProps = {
  onSignOut?: () => void
  onOtherAssetsClick?: () => void
}

export default function Root(props: RootProps) {
  const { onSignOut, onOtherAssetsClick } = props

  const [, theme] = useStyletron()

  const { disconnect } = useDisconnect()
  const { signOut } = useSignOut()

  const setDropdownView = useDropdownStore((state) => state.setView)
  const handleSettingsClick = useCallback(
    () => setDropdownView(DropdownView.SETTINGS),
    [setDropdownView],
  )

  const handleLogOut = useCallback(() => {
    if (onSignOut) {
      onSignOut()
      return
    }
    signOut()
    disconnect()
  }, [signOut, disconnect, onSignOut])

  const overridesWithDivider = {
    Block: {
      style: {
        borderBottomWidth: "1px",
        borderBottomStyle: "solid",
        borderBottomColor: theme.colors.borderOpaque,
      },
    },
  }

  return (
    <Block display="inline-flex" flexDirection="column">
      <WelcomeBlock />

      <AccountAddressActions overrides={overridesWithDivider} />

      <WalletAddress overrides={overridesWithDivider} />

      <AccountBalance overrides={overridesWithDivider} />

      <AccountBtcListing />

      <AccountMusdListing />

      <AccountMezoListing />

      <AccountOtherAssets
        onClick={onOtherAssetsClick}
        overrides={overridesWithDivider}
      />

      <Block
        display="flex"
        alignItems="center"
        justifyContent="space-between"
        padding={theme.sizing.scale300}
      >
        <Button
          size="small"
          shape="pill"
          kind="tertiary"
          startEnhancer={<Settings01 color="currentColor" size={16} />}
          onClick={handleSettingsClick}
        >
          Settings
        </Button>
        <Button
          size="small"
          shape="pill"
          kind="tertiary"
          startEnhancer={<LogOut01 color="currentColor" size={16} />}
          onClick={handleLogOut}
        >
          Sign out
        </Button>
      </Block>
    </Block>
  )
}