import React, { Component } from "react"
import Radium from "radium"
import PropTypes from "prop-types"
import { Icon, Image, Box, Row } from "."
import { colorInfo, sizeInfo, fontInfo } from "./style"

export class Header extends Component {
  static propTypes = {
    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
    location: PropTypes.object,
    left: PropTypes.arrayOf(PropTypes.object),
    right: PropTypes.arrayOf(PropTypes.object),
  }

  render() {
    const { location } = this.props

    const renderHeaderitem = (item, index) => {
      if (item.image) {
        return (
          <Header.Button
            key={index}
            image={item.image}
            onClick={() => this.props.history.push(item.path)}
          />
        )
      } else if (item.icon) {
        return (
          <Header.Button
            key={index}
            icon={item.icon}
            onClick={() => this.props.history.push(item.path)}
          />
        )
      } else if (item.text) {
        return (
          <Header.TextButton
            key={index}
            active={location.pathname.endsWith(item.path)}
            text={item.text}
            onClick={() => this.props.history.push(item.path)}
          />
        )
      }
    }

    return (
      <Box
        background={colorInfo.headerButtonBackground}
        borderBottom={{
          width: sizeInfo.headerBorderWidth,
          color: colorInfo.headerBorder,
        }}
        style={{ boxSizing: "content" }}>
        <Row fillParent>
          <Row.Item>{this.props.left.map(renderHeaderitem)}</Row.Item>
          <Row.Item grow />
          <Row.Item>{this.props.right.map(renderHeaderitem)}</Row.Item>
        </Row>
      </Box>
    )
  }
}

Header.Button = Radium(
  class HeaderButton extends Component {
    static propTypes = {
      onClick: PropTypes.func,
      icon: PropTypes.string,
      image: PropTypes.string,
    }

    static style = {
      background: colorInfo.headerButtonBackground,
      verticalAlign: "middle",
      borderWidth: 0,
      padding: "0 0 0 0",
      outline: "none",
      ":hover": {
        background: colorInfo.headerButtonBackgroundHover,
      },
      ":active": {
        background: colorInfo.headerButtonBackgroundActive,
      },
    }

    render() {
      // Times two to account for zooming
      const size = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
      const { onClick, icon, image } = this.props
      let content = null

      if (image) {
        content = (
          <Image
            source={image}
            width={size}
            height={size}
            margin={sizeInfo.headerButtonMargin}
          />
        )
      } else if (icon) {
        content = (
          <Icon name={icon} size={size} margin={sizeInfo.headerButtonMargin} />
        )
      }

      return (
        <button
          type="button"
          style={[{ height: size, width: size }, HeaderButton.style]}
          onClick={onClick}>
          {content}
        </button>
      )
    }
  }
)

Header.TextButton = Radium(
  class HeaderTextButton extends Component {
    static propTypes = {
      active: PropTypes.bool,
      text: PropTypes.string,
      onClick: PropTypes.func,
    }

    static style = {
      display: "inline-block",
      position: "relative",
      top: 3,
      fontSize: fontInfo.size.header,
      fontFamily: fontInfo.family,
      color: fontInfo.color.normal,
      textAlign: "left",
      outline: "none",
      background: "transparent",
      verticalAlign: "middle",
      borderWidth: 0,
      paddingLeft: sizeInfo.headerSpacing,
      paddingRight: sizeInfo.headerSpacing,
      paddingTop: 0,
      paddingBottom: 0,
      ":hover": {
        background: colorInfo.headerButtonBackgroundHover,
      },
      ":active": {
        background: colorInfo.headerButtonBackgroundActive,
      },
    }

    render() {
      const height = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
      const { text, active, onClick } = this.props

      return (
        <button
          type="button"
          style={[{ height }, HeaderTextButton.style]}
          onClick={onClick}>
          <div
            style={{
              textDecoration: active ? "underline" : "initial",
            }}>
            {text}
          </div>
        </button>
      )
    }
  }
)