import { Block, useStyletron } from "@mezo-org/mezo-clay"
import React, { useEffect } from "react"
import useDropdownStore, { DropdownView } from "../../stores/dropdownStore"
import Root from "./Root/Root"
import Receive from "./Receive/Receive"
import Settings from "./Settings/Settings"
import TestnetTopBanner from "./TestnetTopBanner"

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

function Content(props: ContentProps) {
  const { onSignOut, onOtherAssetsClick } = props

  const [_, theme] = useStyletron()

  const currentView = useDropdownStore((state) => state.view)
  const setView = useDropdownStore((state) => state.setView)

  useEffect(
    () => () => {
      setView(DropdownView.ROOT)
    },
    [setView],
  )

  return (
    <Block
      display="inline-flex"
      flexDirection="column"
      backgroundColor={theme.colors.backgroundPrimary}
      width="100%"
      overrides={{
        Block: {
          style: {
            boxSizing: "border-box",
          },
        },
      }}
    >
      <TestnetTopBanner />

      {currentView === DropdownView.ROOT && (
        <Root onSignOut={onSignOut} onOtherAssetsClick={onOtherAssetsClick} />
      )}

      {currentView === DropdownView.RECEIVE && <Receive />}

      {currentView === DropdownView.SETTINGS && <Settings />}
    </Block>
  )
}

export default Content