import * as React from 'react';

import {
  imgResize
} from '../utils/imgResize';

import {
  Props,
  State
} from './type';
import {
  Container,
  NavLinkItem,
  NavItemIcon,
  NavItemText
} from './index.style';

export class NavBar extends React.Component<Props, State> {
  static defaultProps = new Props();
  state = new State();

  public render () {
    const {
      color,
      style,
      marginTop,
      marginBottom,
      navData
    } = this.props;

    return (
      <Container
        style={{
          ...style,
          marginTop: `${marginTop}rem`,
          marginBottom: `${marginBottom}rem`
        }}
      >
        {
          navData.map((nav, index) => (
            <NavLinkItem
              key={`${nav.name}-${nav.link}-${index}`}
              href={nav.link || 'javascript: void(0);'}
            >
              {
                nav.icon && (
                  <NavItemIcon
                    src={imgResize(
                      nav.icon.url,
                      64,
                      64,
                      1
                    )}
                  />
                )
              }
              <NavItemText
                style={{ color }}
              >{nav.name}</NavItemText>
            </NavLinkItem>
          ))
        }
      </Container>
    )
  }
}