import { Fragment } from 'react'

import map from 'lodash/map'

import { useToggle } from 'hooks'
import { Icon, MenuItem } from 'features/Menu/styled'

import { GroupBlock } from './components/GroupBlock'
import { useFavoritesMobilePopup } from './hooks'
import {
  FavoritesPopup,
  Wrapper,
  EmptyDiv,
  HomeIcon,
  HeaderWrapper,
  GroupWrapper,
  MainLogo,
} from './styled'

export const FavoritesMobilePopup = () => {
  const { groupedFavorites } = useFavoritesMobilePopup()
  const {
    close,
    isOpen,
    open,
  } = useToggle()

  return (
    <Fragment>
      {
        isOpen
          ? (
            <FavoritesPopup>
              <Wrapper>

                <HeaderWrapper>
                  <EmptyDiv />
                  <MainLogo width={4} height={0.95} />
                  <HomeIcon
                    src='homeFavorites'
                    size='1rem'
                    onClick={close}
                  />
                </HeaderWrapper>

                <GroupWrapper>
                  {map(groupedFavorites, (group) => (
                    <GroupBlock
                      key={group.typeLexic}
                      groupBlock={group}
                    />
                  ))}
                </GroupWrapper>

              </Wrapper>
            </FavoritesPopup>
          )
          : (
            <MenuItem>
              <Icon
                src='starEmpty'
                size='1.4rem'
                onClick={open}
              />
            </MenuItem>
          )

      }
    </Fragment>
  )
}