import * as React from "react"
import styled, { withTheme } from "styled-components"
import { Icon as BaseIcon } from "../../.."
import FixScroll from "../../FixScroll"
import NotificationCard from "./NotificationCard"
import withLink from "../withLink"
import breakpoint from "styled-components-breakpoint"

const hoistStatics = require("hoist-non-react-statics")

const Icon = styled(BaseIcon).attrs({ className: "jamplay-icon" })`
  color: ${(props) => props.theme.darkOrange};
  ${breakpoint("tablet-landscape")`
    color: white;
  `} margin-right: 15px;
  cursor: pointer;
`

const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  * {
    text-decoration: none;
  }

  .outside.visible {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    z-index: 10;
  }

  .pop-over {
    position: absolute;
    bottom: -5px;
    right: -9px;
    min-width: 150px;
    background: white;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.222s linear;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 10px)) translateX(0%);
    z-index: 10;
  }

  .pop-over.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateY(calc(100% + 0px)) translateX(0%);
  }

  .pop-arrow {
    top: 0px;
    right: 20px;
    transform: translate(-50%, -100%);
    clip: rect(0 18px 14px -4px);
    position: absolute;
    &:after {
      content: "";
      display: block;
      width: 14px;
      height: 14px;
      background: #fff;
      transform: rotate(45deg) translate(6px, 6px);
      box-shadow: -1px -1px 1px -1px rgba(0, 0, 0, 0.44);
    }
  }

  .badge {
    position: relative;
  }

  .badge[data-badge]:after {
    content: attr(data-badge);
    display: flex;
    position: absolute;
    right: 5px;
    top: -5px;
    font-size: 0.7em;
    background: white;
    color: ${(props) => props.theme.darkOrange};
    ${breakpoint("tablet-landscape")`
      background: #db0404;
      color: white;
    `} border-radius: 8px;
    padding: 0px 5px 1px 5px;
  }
`
const MenuIcon = styled(Icon)`
  font-size: 1.3rem;
`

class Notification extends React.Component<any, any> {
  public state = {
    show: false,
    isMount: false,
    badge: 999
  }

  public toggle = () => {
    this.setState({
      show: !this.state.show
    })
  }
  public show = () => {
    this.setState({ show: true })
    if (this.props.notificationBadge) {
      this.props.clearBadge()
    }
  }

  public hide = () => this.setState({ show: false })

  public componentDidMount() {
    this.setState({
      isMount: true
    })
  }

  public render() {
    const badge = this.state.show ? 0 : this.props.notificationBadge

    return (
      <Container>
        <div
          className="badge"
          data-badge={badge > 0 ? (badge > 99 ? "99+" : badge) : null}
        >
          <div
            className={"outside" + (this.state.show ? " visible" : "")}
            onTouchMove={this.preventDefault}
            onClick={this.hide}
          />
          <div id="notification" className="heavent" onClick={this.show}>
            <MenuIcon name="noti" />
          </div>
          <div className={"pop-over" + (this.state.show ? " visible" : "")}>
            <NotificationCard
              className="heavent"
              loading={this.props.loading}
              hasNextPage={this.props.hasNextPage}
              notifications={this.props.notifications}
              fetchMore={this.props.fetchMore}
            />
            <div className="pop-arrow" />
          </div>
          {this.state.show ? <FixScroll /> : null}
        </div>
      </Container>
    )
  }
  private preventDefault = (e) => e.preventDefault()
}

export default hoistStatics(withTheme(withLink(Notification)), Notification)