import React, { FC, PropsWithChildren, useState } from 'react'
import styled from 'styled-components'
import { Header, HeaderProps } from './Header'
import { Footer } from './Footer'
import { Menu } from '../Menu'
import { Breakpoint, useBreakpoint } from '../Breakpoint'

const StyledSection = styled.section`
  display: flex;
  min-height: 100vh;
  flex-direction: column;
`

const StyledHeader = styled(Header)`
  flex: 0 0 auto;
`

const StyledFooter = styled(Footer)`
  flex: 0 0 auto;
`

const StyledMain = styled.main`
  flex: auto;
`
const StyledMainSection = styled.section`
  flex: auto;
  display: flex;
  flex-direction: column;
`

const StyledMainWrapper = styled.section<{ $column?: boolean }>`
  flex: auto;
  display: flex;
  flex-direction: ${({ $column }) => $column ? 'column' : 'row'};
`

export const Main: FC<PropsWithChildren<{ column?: boolean }>> = ({ children, column }) => {
	return (
		<>
			<Breakpoint s down>
				{children}
			</Breakpoint>
			<Breakpoint s up>
				<StyledMainWrapper $column={column}>
					{children}
				</StyledMainWrapper>
			</Breakpoint>
		</>
	)
}

export const Layout: FC<PropsWithChildren<Omit<HeaderProps, 'className' | 'onClickMenu'>>> = ({
																																																children,
																																																...headerProps
																																															}) => {
	const isSmallScreen = useBreakpoint({ s: true, down: true })
	const [displayMenu, setDisplayMenu] = useState(false)

	const handleClickMenu = () => {
		if (!isSmallScreen) return
		setDisplayMenu(s => !s)
	}

	const handleCloseMenu = () => {
		if (!isSmallScreen) return
		setDisplayMenu(false)
	}

	const handleLogout = () => {}
	return (
		<StyledSection>
			<StyledHeader {...headerProps} onClickMenu={handleClickMenu} />
			<Main>
				{headerProps.showMenu && (!isSmallScreen || displayMenu) ?
					<Menu onClose={handleCloseMenu} onLogout={handleLogout} /> : null}
				<StyledMainSection>
					<StyledMain>
						{children}
					</StyledMain>
					<StyledFooter />
				</StyledMainSection>
			</Main>
		</StyledSection>
	)
}