import * as React from "react"
import styled, { css } from "styled-components"
import MenuItem from "./MenuItem.component"
import SocialLink from "../../SocialLink"

import { SocialMedia } from "./Social.component"
import CategorySprite from "./CategorySprite.component"
import withTranslate from "jamplay-common/i18n/withTranslate"
import FixScroll from "../../FixScroll"

const DrawerContainerRoot = styled.div`
  width: 300px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99999999;
  opacity: 0;
  pointer-events: none;
  transition: 0.11111s ease-in opacity;
  will-change: opacity;
`
const DrawerContainer = styled(DrawerContainerRoot)`
  hr {
    color: #e5e5e5;
    background-color: #e5e5e5;
    height: 1px;
    border: none;
    width: 100%;
  }

  .outside.visible {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
  }
  ${(props: any) =>
    props.visible
      ? css`
          opacity: 1 !important;
          pointer-events: all !important;
        `
      : ""};
` as any
const DrawerMenu = styled.div`
  box-shadow: 2px 0 2px rgba(0, 0, 0, 0.3);
  position: relative;
  -webkit-overflow-scrolling: touch;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  height: 100vh;
  background: white;
  transform: translateX(-100%);
  transition: 0.2222s ease-in-out transform;
  will-change: transform;
  overflow-y: auto;
`
const DrawerMenuWithVisible = styled(DrawerMenu)`
  ${(props: any) =>
    props.visible
      ? css`
          transform: translateX(0%) !important;
        `
      : ""};
` as any

const DrawerMenuContent = styled.div`
  margin-top: 30px;
  margin-bottom: 30px;
`

@withTranslate
export default class Drawer extends React.Component {
  public state: {
    isMount: boolean
  }
  public props: {
    visible: boolean
    onClose?: () => void
    categories: any
  } & withTranslatePropType
  constructor(props) {
    super(props)
    this.state = {
      isMount: false
    }
  }
  public componentDidMount() {
    this.setState({ isMount: true })
  }
  public render() {
    const { t, visible, onClose, categories } = this.props
    if (!t) {
      throw new Error("have no translate")
    }
    if (!categories) {
      throw new Error(
        "Drawer.component.js, Categories data is not provided to Layout/DrawerMenu, please follow Landing/index.js:66-68"
      )
    }
    let pathname = ""
    if (typeof window !== "undefined") {
      pathname = window.location.pathname
    }
    if (!this.state.isMount) {
      return <div />
    }
    return (
      <DrawerContainer visible={visible}>
        <DrawerMenuWithVisible visible={visible} id="drawer-menu">
          <DrawerMenuContent>
            <MenuItem
              active={pathname === "/" || pathname === "/home"}
              href="/"
              iconName={"home"}
              title={t("navigation-bar/drawer/home")}
              className={visible ? "menuIn" : ""}
              delay={0.222}
              style={{}}
            />
            <MenuItem
              active={pathname === "/all/trendy"}
              href="/all/trendy"
              iconName={"trendy"}
              title={t("trendy")}
              className={visible ? "menuIn" : ""}
              delay={0.222}
              style={{}}
            />
            <MenuItem
              iconName={"update"}
              href="/all/recently"
              active={pathname === "/all/recently"}
              title={t("recently")}
              className={visible ? "menuIn" : ""}
              delay={0.222}
              style={{ marginBottom: 0 }}
            />
            <MenuItem
              iconName={"write"}
              active={pathname === "/create-book"}
              href={"/create-book"}
              title={t("write-book")}
              className={visible ? "menuIn" : ""}
              delay={0.222}
              style={{ marginBottom: 15 }}
            />
            <hr style={{ marginBottom: 15 }} />
            <MenuItem
              iconName={
                <CategorySprite style={{ marginRight: 5 }} name={"jamsai"} />}
              active={false}
              href={"/all/jamsai/trendy"}
              title={t("fiction") + " " + t("jamsai")}
              className={visible ? "menuIn" : ""}
              delay={0.444}
            />
            {categories.map((category, i) => (
              <MenuItem
                active={false}
                href={`/${category.prefix}/trendy`}
                className={visible ? "menuIn" : ""}
                delay={0.444 + 0.022 * (i + 1)}
                iconName={
                  <CategorySprite
                    style={{ marginRight: 5 }}
                    name={category.value.toLowerCase()}
                  />
                }
                title={t("fiction") + " " + t(category.name)}
                key={category.value}
              />
            ))}
            <hr style={{ marginBottom: 15 }} />
            <MenuItem
              iconName={""}
              active={pathname === "/page/about-us"}
              href="/page/about-us"
              title={t("about-us")}
              className={visible ? "menuIn" : ""}
              style={{ marginBottom: 0 }}
            />
            <MenuItem
              iconName={""}
              href="/page/about-jelly"
              active={pathname === "/page/about-jelly"}
              title={t("about-jelly")}
              className={visible ? "menuIn" : ""}
              style={{ marginBottom: 0 }}
            />
            <MenuItem
              iconName={""}
              href="/page/manual"
              active={pathname === "/page/manual"}
              title={t("manual")}
              className={visible ? "menuIn" : ""}
              style={{ marginBottom: 0 }}
            />
            <MenuItem
              iconName={""}
              href={"/page/join-editor"}
              active={pathname === "/page/join-editor"}
              title={t("join-editor")}
              className={visible ? "menuIn" : ""}
              style={{ marginBottom: 0 }}
            />
            <MenuItem
              iconName={""}
              href={"/page/terms"}
              active={pathname === "/page/terms"}
              title={t("term-condition")}
              className={visible ? "menuIn" : ""}
              style={{ marginBottom: 0 }}
            />
            <MenuItem
              iconName={""}
              href={"/page/privacy-policy"}
              active={pathname === "/page/privacy-policy"}
              title={t("privacy-policy")}
              className={visible ? "menuIn" : ""}
              style={{ marginBottom: 0 }}
            />
            <SocialMedia>
              <SocialLink />
            </SocialMedia>
          </DrawerMenuContent>
        </DrawerMenuWithVisible>
        <div
          className={`outside ${visible ? "visible" : ""}`}
          onClick={onClose}
        />
        {visible ? <FixScroll /> : null}
      </DrawerContainer>
    )
  }
}