import {
  ArrowLeft,
  Block,
  BlockProps,
  ButtonIcon,
  HeadingSmall,
  useStyletron,
} from "@mezo-org/mezo-clay"
import React, { ReactNode, useCallback } from "react"
import useDropdownStore, { DropdownView } from "../../stores/dropdownStore"

const getHeaderTitle = (view: DropdownView) => {
  const titleMap: Partial<Record<DropdownView, string>> = {
    [DropdownView.RECEIVE]: "Scan to receive",
    [DropdownView.SETTINGS]: "Settings",
  }
  return titleMap[view]!
}

type NestedViewLayoutProps = {
  children: ReactNode
} & BlockProps

function NestedViewLayout(props: NestedViewLayoutProps) {
  const { children, ...restProps } = props

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

  const [, theme] = useStyletron()

  const handleOnButtonClick = useCallback(() => {
    setView(DropdownView.ROOT)
  }, [setView])

  return (
    <Block
      display="flex"
      flexDirection="column"
      minHeight="588px"
      {...restProps}
    >
      <Block
        display="flex"
        alignItems="center"
        padding={theme.sizing.scale100}
        paddingTop={theme.sizing.scale800}
        paddingBottom={theme.sizing.scale500}
        marginBottom={theme.sizing.scale300}
        overrides={{
          Block: {
            style: {
              gap: theme.sizing.scale300,
            },
          },
        }}
      >
        <ButtonIcon
          onClick={handleOnButtonClick}
          shape="circle"
          size="medium"
          kind="tertiary"
        >
          <ArrowLeft />
        </ButtonIcon>

        <HeadingSmall
          marginTop={theme.sizing.scale300}
          marginBottom={theme.sizing.scale300}
        >
          {getHeaderTitle(currentView)}
        </HeadingSmall>
      </Block>

      <Block
        display="flex"
        flexDirection="column"
        padding={theme.sizing.scale600}
        paddingTop={0}
        flex={1}
      >
        {children}
      </Block>
    </Block>
  )
}

export default NestedViewLayout