import React from 'react'
import { MenuListProps } from './typings'
import Button from 'atoms/Button'
import Link from 'atoms/Link'
import Image from 'atoms/Image'
import {
  MenuListWrapper,
  MenuListPanel,
  ListOfButtonWrapper,
  ListOfLinksGridWrapper,
  ImageWrapper,
  GridPanel,
  ViewAllText,
  NavigationListItem,
  StyledMultipleLinkList,
} from './styled'

function renderImage(props: MenuListProps) {
  const { imageData, ...remainingProps } = props
  const imageView = <Image src={imageData.src} doAutoAlign />
  return <ImageWrapper>{imageView}</ImageWrapper>
}

function renderListOfButtons(props: MenuListProps) {
  return <NavigationListItem />
}

function renderListOfLinksGrid(props: MenuListProps) {
  return (
    <ListOfLinksGridWrapper>
      <ViewAllText content={props.linkViewAllText[0].text} />
      <GridPanel className="active">
        <StyledMultipleLinkList {...props} />
      </GridPanel>
    </ListOfLinksGridWrapper>
  )
}

function renderWrapper(props: MenuListProps) {
  const { className, children } = props
  return (
    <MenuListWrapper className={className}>
      <MenuListPanel>{children}</MenuListPanel>
    </MenuListWrapper>
  )
}

export {
  renderImage,
  renderListOfLinksGrid,
  renderListOfButtons,
  renderWrapper,
}