import React, { useState } from 'react';
import {
  HamburguerContainer,
  OverlayMenuContainer,
  Bar,
  Styles,
} from './styles';
import { AtomLink } from 'native/atoms/Link';
import { CSSObject } from 'styled-components';
import { AtomLogo } from 'native/atoms/Logo';

export interface IHamburguerMenuLinkProps {
  /** Name icon left: a icon wich be placed on the menu element */
  nameIconLeft: string;
  /** Text link */
  text: string;
  /** URL to redirect */
  url: string;
  /** Styles in format CSSObject */
  styles?: CSSObject;
}
export interface IHamburguerMenuProps {
  /* Elements that populate the menu */
  menuElements: IHamburguerMenuLinkProps[];
  /** to know if the menu is closed or not */
  isClosed?: Function;
  /* Function to execute on click on the hamburguer menu */
  onPress?: (e?: any) => void;
}

export const OrganismHamburguerMenu = ({
  menuElements,
  isClosed = () => false,
  onPress,
}: IHamburguerMenuProps) => {
  const [change, setChange] = useState<boolean>(false);
  const toggleHamburguer = () => {
    onPress && onPress();
    setChange(!change);
    isClosed(change);
  };

  return (
    <>
      <HamburguerContainer
        style={{ width: change ? '160px' : '24.75px' }}
        onPress={() => toggleHamburguer()}
        testID='burguerMenu'
        key={'hamburguer-container'}
      >
        <Bar style={change ? Styles.barUpperTransition : {}} />
        <Bar style={change ? Styles.hide : {}} />
        <Bar style={change ? Styles.barDownTransition : {}} />
        <AtomLogo
          logoTheme='light'
          size='small'
          text='sided'
          style={
            change
              ? {
                  display: 'flex',
                  marginTop: -30,
                  marginLeft: 45,
                  position: 'relative',
                }
              : Styles.hide
          }
        />
      </HamburguerContainer>
      <OverlayMenuContainer
        style={change ? Styles.overlayShow : Styles.hide}
        key='menu-overlay'
      >
        {menuElements.map((element: IHamburguerMenuLinkProps) => (
          <AtomLink
            align='left'
            color='custom'
            customColor='neutral'
            nameIconLeft={element.nameIconLeft}
            nameIconRight='keyboard_arrow_right'
            styles={{ ...element.styles, ...Styles.anchorMenu }}
            text={element.text}
            typeIcon='Left'
            typeLink='default'
            url={element.url}
          />
        ))}
      </OverlayMenuContainer>
    </>
  );
};
