import React, { FC, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { Layout } from 'components/Layout'
import { ActivationStore } from 'stores/ActivationStore'
import { Outlet, useMatch } from 'react-router-dom'
import { Paths } from './Paths'
import { useBreakpoint } from '../components/Breakpoint'

export const HomeLayout: FC<{ alwaysShowIcon?: boolean }> = observer(({ alwaysShowIcon }) => {
	const [store] = useState(ActivationStore.instance())
	const isActive = useMatch(Paths.Activate)
	const isSmallScreen = useBreakpoint({
		s: true,
		down: true
	})
	const showMenu = !!isActive && isSmallScreen && store.step === store.stepItems.length - 1
	return (
		<Layout showMenu={alwaysShowIcon || showMenu} showActiveKit={alwaysShowIcon} activeKitHref={Paths.Activate}>
			<Outlet />
		</Layout>
	)
})
