import * as React from "react"
import styled from "styled-components"
import { Icon as BaseIcon } from "../.."
import breakpoint from "styled-components-breakpoint"
import * as NavItem from "./Nav/NavItem"
import * as Navbar from "./Nav/NavBar"
import UserInfo from "./UserInfo"
import Notification from "./Notification"
import withLink from "./withLink"
import { Link as JamplayNewLink } from "jamplay-common/routing"
import Drawer from "./Drawer"
import { SearchTextInputStandalone } from "../SearchTextInput"
import withTranslate from "jamplay-common/i18n/withTranslate"
import { withRouter } from "next/router"

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

const NavItemCenterMenu = styled(NavItem.Primary)`
  margin: 0 20px;
  font-size: 1rem;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.22s ease-in-out;
  &:hover {
    opacity: 0.8;
    transform: translateY(-3px);
  }
  ${breakpoint("mobile")`
    margin: 0;
    width: 40px;
    color: ${(props) => props.theme.darkOrange};
    &.hide-on-mobile {
      display: none;
    }
    span {
      display: none;
    }
  `} ${breakpoint("tablet-landscape")`
    color: ${(props) => props.theme.white};
    width: auto;
    display: block;
    margin: 0 20px;
    &.hide-on-mobile {
      display: block;
    }
    span {
      display: block;
    }
  `};
`
const SectionCenter = styled(Navbar.Section)`
  flex: 1 0 auto;
  margin-left: 21px;
  ${breakpoint("mobile")`
    justify-content: flex-end;
  `} ${breakpoint("tablet-landscape")`
    justify-content: center;
  `}
  @media screen and (max-width:950px) {
    margin-left: 0px;
  }
`
const UserSection = styled(Navbar.Section)`
  padding-left: 40px;

  ${breakpoint("mobile")`
    padding: 0;
  `};
`

const LogoContainer = styled.div`
  cursor: pointer;
  @media screen and (max-width: 950px) {
    width: 140px;
    background-size: contain;
    background-position: center;
  }
`
const LogoJamsai = () => <LogoContainer className="jamplay-logo" />

export const NavigationbarLayout = withLink(
  ({ onHamburgerClick, children, noHamburger, Link }: any) => {
    return (
      <Navbar.Container>
        <Navbar.ViewPort>
          <Navbar.Section>
            {!noHamburger ? (
              <Icon
                style={{ fontSize: "1.5rem" }}
                onClick={onHamburgerClick}
                name="hamburger"
              />
            ) : null}
            <JamplayNewLink.Landing params={{}}>
              <a>
                <LogoJamsai />
              </a>
            </JamplayNewLink.Landing>
          </Navbar.Section>
          {children}
        </Navbar.ViewPort>
      </Navbar.Container>
    )
  }
) as any

const MenuIcon = styled(Icon)`
  font-size: 1.3rem;
`
const NavigationContainer = styled.div`
  z-index: 3;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background: ${(props) => props.theme.pumpkin};
  background-clip: border-box;

  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.13);

  .NavigationBar__search-wrapper {
    flex: 1 1 auto;
    margin-left: 13px;

    ${breakpoint("tablet")`
      margin-right: 13px
    `};
    .SearchTextInput {
      width: 100%;
    }
    .SuggestionResultDialog__wrapper {
      box-shadow: 2px 2px 5px rgba(3, 3, 3, 0.1);
    }
    h6 {
      margin: 8px 0;
    }
    .SearchTextInputContainer__input-wrap .jamplay-icon {
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 0px 5px 5px 0px;
    }
    input {
      color: white;
      margin: 0;
      background-color: rgba(255, 255, 255, 0.2);
      border: none;
      border-radius: 5px 0px 0 5px;
      &::placeholder {
        color: rgba(255, 255, 255, 0.6);
      }
      &:focus {
        outline: none;
        border: none;
        box-shadow: none;
      }
    }
  }
  .NavigationBar__menu-wrapper {
    flex: 0 0 auto;
  }
  .NavigationBar__menu-wrapper {
    display: flex;
  }
  .hide-on-mobile {
    ${breakpoint("mobile")`
      display: none;
    `} ${breakpoint("tablet")`
      display: block;
    `};
  }
  .show-on-mobile {
    ${breakpoint("mobile")`
      display: block;
    `} ${breakpoint("tablet")`
      display: none;
    `};
  }
  .NavigationBar__search-wrapper.show-on-mobile {
    margin: 5px 8px;
  }
`

@(withRouter as any)
@withTranslate
class Component extends React.Component<
  {
    Link: any
    isLoggedIn: boolean
    style?: any
    className?: string
    streamUrl: string
    coreGraphQLUrl?: string
  } & withTranslatePropType
> {
  public state: {
    showDrawer: boolean
  } = { showDrawer: false }
  public showDrawer = () => this.setState({ showDrawer: true })
  public hideDrawer = () => this.setState({ showDrawer: false })
  public render() {
    const { router } = this.props as any
    const Link = this.props.Link
    if (!this.props.t) {
      throw Error("translate not defined")
    }
    return (
      <NavigationContainer
        className={this.props.className}
        style={this.props.style}
      >
        <Drawer visible={this.state.showDrawer} onClose={this.hideDrawer} />
        <NavigationbarLayout onHamburgerClick={this.showDrawer}>
          <SectionCenter>
            <div className="NavigationBar__search-wrapper hide-on-mobile">
              <SearchTextInputStandalone
                coreGraphQLUrl={this.props.coreGraphQLUrl}
                initValue={
                  router
                    ? router.query.v
                    : undefined
                }
              />
            </div>
            <NavItemCenterMenu className="hide-on-mobile">
              <Link href="/all/trendy" className="heavent">
                <MenuIcon name="trendy" style={{ marginRight: 5 }} />
                <span>{this.props.t("trendy")}</span>
              </Link>
            </NavItemCenterMenu>
            <NavItemCenterMenu className="hide-on-mobile">
              <Link className="heavent" href="/all/recently">
                <MenuIcon name="update" style={{ marginRight: 5 }} />
                <span>{this.props.t("recently")}</span>
              </Link>
            </NavItemCenterMenu>
            <NavItemCenterMenu>
              <Link
                id="write-book"
                className="heavent"
                href={
                  this.props.isLoggedIn
                    ? "/create-book"
                    : "/login?asPath=create-book"
                }
              >
                <MenuIcon name="write" style={{ marginRight: 5 }} />
                <span>{this.props.t("write-book")}</span>
              </Link>
            </NavItemCenterMenu>
          </SectionCenter>
          {this.props.isLoggedIn ? (
            <UserSection>
              <Notification streamUrl={this.props.streamUrl} />
            </UserSection>
          ) : null}
          <UserSection>
            <UserInfo />
          </UserSection>
        </NavigationbarLayout>
        <div className="show-on-mobile NavigationBar__search-wrapper">
          <SearchTextInputStandalone
            coreGraphQLUrl={this.props.coreGraphQLUrl}
            initValue={
              router ? router.query.v : undefined
            }
          />
        </div>
      </NavigationContainer>
    )
  }
}

// tslint:disable
export class OnlyLogoNavbar extends React.Component<
  {
    style?: any
    className?: string
  }
> {
  public render() {
    return (
      <NavigationContainer
        className={this.props.className}
        style={this.props.style}
      >
        <NavigationbarLayout noHamburger />
      </NavigationContainer>
    )
  }
}


export default withLink(Component)