import * as React from "react";
import { Grid } from "@material-ui/core";
import { BrowserRouter as Router } from "react-router-dom";
import { EditorMode } from "@sc/modules/v2/Editor/types";

import { Grid as SCGrid, GridItem, Image } from "../";
import { ComponentProps, NavigationLayouts } from "./types";
import { getMediaQueries } from "../theme";

import { Links } from "./Links";
import { Copyright } from "./Copyright";
import { Logo } from "./Logo";
import { Hamburger } from "./Hamburger";

interface WrapperFields {
  style?: React.CSSProperties;
  children: React.ReactNode;
}

const Wrapper: React.FC<WrapperFields> = ({ style, children }) => {
  return <div data-testid="WC-NAVIGATION-LIVE">{children}</div>;
};

export const Navigation: React.FC<ComponentProps> = ({
  layout,
  logo,
  logoHref,
  logoStyle,
  items,
  style,
  linkStyle,
  showSocial,
  hamburgerIconStyle,
  copyrightStyle,
}) => {
  if (layout === NavigationLayouts.STANDARD) {
    const { sm, md, lg, xl } = getMediaQueries();

    return (
      <Wrapper>
        <Grid container style={style}>
          <Grid item xs={2}>
            <Logo logoHref={logoHref} logo={logo} logoStyle={logoStyle} />
          </Grid>
          <Grid item xs={8}>
            {md && <Links items={items} linkStyle={linkStyle} />}
          </Grid>
          <Grid item xs={1} />
          <Grid item xs={1}>
            <Hamburger
              hamburgerIconStyle={hamburgerIconStyle}
              linkStyle={linkStyle}
              logoHref={logoHref}
              logo={logo}
              logoStyle={logoStyle}
              items={items}
            />
          </Grid>
        </Grid>
      </Wrapper>
    );
  }

  if (layout === NavigationLayouts.FOOTER_STANDARD) {
    const { md } = getMediaQueries();
    return (
      <Wrapper>
        <Grid container style={style}>
          <Grid item xs={11} md={2}>
            <Copyright style={copyrightStyle} />
          </Grid>
          <Grid item md={showSocial ? 9 : 10}>
            {md && <Links items={items} linkStyle={linkStyle} />}
          </Grid>
          {showSocial && (
            <Grid item xs={1}>
              <Image src="social.png" />
            </Grid>
          )}
        </Grid>
      </Wrapper>
    );
  }

  if (layout === NavigationLayouts.ONE) {
    return (
      <Wrapper>
        <Router>
          <SCGrid style={style}>
            <GridItem xs={2}>
              <Logo logoHref={logoHref} logo={logo} logoStyle={logoStyle} />
            </GridItem>
            <GridItem xs>
              <div style={{ float: "right" }}>
                <Links items={items} linkStyle={linkStyle} />
              </div>
            </GridItem>
          </SCGrid>
        </Router>
      </Wrapper>
    );
  }

  if (layout === NavigationLayouts.TWO) {
    return (
      <Wrapper>
        <Router>
          <SCGrid style={style}>
            <GridItem xs={2}>
              <Logo logoHref={logoHref} logo={logo} logoStyle={logoStyle} />
            </GridItem>
            <GridItem xs>
              <Links
                style={{ margin: "0 auto" }}
                filter={2}
                items={items}
                linkStyle={linkStyle}
              />
            </GridItem>
            <GridItem xs={3}>
              <div style={{ float: "right" }}>
                <Links filter={3} items={items} linkStyle={linkStyle} />
              </div>
            </GridItem>
          </SCGrid>
        </Router>
      </Wrapper>
    );
  }

  if (layout === NavigationLayouts.THREE) {
    return (
      <Wrapper>
        <Router>
          <SCGrid style={style}>
            <GridItem xs={2}>
              <Logo logoHref={logoHref} logo={logo} logoStyle={logoStyle} />
            </GridItem>
            <GridItem xs>
              <Hamburger
                hamburgerIconStyle={hamburgerIconStyle}
                linkStyle={linkStyle}
                logoHref={logoHref}
                logo={logo}
                logoStyle={logoStyle}
                items={items}
              />
            </GridItem>
          </SCGrid>
        </Router>
      </Wrapper>
    );
  }

  if (layout === NavigationLayouts.FOUR) {
    return (
      <Wrapper>
        <Router>
          <SCGrid style={style}>
            <GridItem xs={3}>
              <Copyright style={copyrightStyle} />
            </GridItem>
            <GridItem xs>
              <div style={{ float: "right" }}>
                <Links items={items} linkStyle={linkStyle} />
              </div>
            </GridItem>
          </SCGrid>
        </Router>
      </Wrapper>
    );
  }

  if (layout === NavigationLayouts.FIVE) {
    return (
      <Wrapper>
        <Router>
          <Links items={items} linkStyle={linkStyle} />
        </Router>
      </Wrapper>
    );
  }

  if (layout === NavigationLayouts.SIX) {
    return (
      <Wrapper>
        <Router>
          <div style={style}>
            <Links items={items} linkStyle={linkStyle} />
          </div>
        </Router>
      </Wrapper>
    );
  }

  if (layout === NavigationLayouts.SEVEN) {
    return (
      <Wrapper>
        <Router>
          <SCGrid style={style}>
            <GridItem xs={6}>
              <Links filter={1} items={items} linkStyle={linkStyle} />
            </GridItem>
            <GridItem xs={6}>
              <div style={{ float: "right" }}>
                <Links filter={2} items={items} linkStyle={linkStyle} />
              </div>
            </GridItem>
          </SCGrid>
        </Router>
      </Wrapper>
    );
  }
  return <Wrapper>N/A</Wrapper>;
};

export default Navigation;