import React, { useState } from "react";
import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
import { MenuList } from "./MenuList";
import { Link, useHistory } from "react-router-dom";
import { HomeOutlined, MenuOutlined, UserOutlined } from "@ant-design/icons";
import { AppRoute, LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { useMediaQuery } from "react-responsive";

const { Text, Paragraph } = Typography;
const { Header, Content, Sider } = Layout;
const { SubMenu } = Menu;

export const DesktopLayout = observer(() => {
  let history = useHistory();
  const xl = useMediaQuery({ minWidth: 1024 });
  const store = useStore();
  const [clicked, setClicked] = useState(false);

  return (
    <Layout
      theme={"light"}
      className={"transparent"}
      hasSider={store.ui.mediaQuery.isDesktop}
      style={{
        paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
        display: "flex",
        // minWidth: 1024,
        width: "100%",
        height: "100%",
        position: "relative",
      }}
    >
      {store.ui.mediaQuery.isDesktop && (
        <Sider
          className={"transparent"}
          width={240}
          style={{
            overflowX: "hidden",
            bottom: 0,
            justifyContent: "flex-start",
            paddingTop: 20,
            paddingLeft: 20,
            position: "fixed",
            top: 0,
            zIndex: 10,
          }}
        >
          <div
            style={{
              paddingLeft: 20,
              marginBottom: 40,
            }}
          >
            <Paragraph
              style={{
                margin: 0,
                padding: 0,
                fontSize: 20,
                marginLeft: 5,
                fontWeight: 600,
                color: "#828282",
              }}
            >
              PPOB
            </Paragraph>
            <Paragraph
              style={{
                margin: 0,
                padding: 0,
                fontSize: 11,
                marginLeft: 5,
                fontWeight: 600,
                color: "#413d3e",
              }}
            >
              Admin
            </Paragraph>
          </div>
          <MenuList closeLeftDrawer={() => {}} />
        </Sider>
      )}

      {store.ui.mediaQuery.isMobile && (
        <Drawer
          title="Navigation"
          placement={"left"}
          closable={false}
          width={"50%"}
          onClose={() => {
            store.ui.toggleLeftDrawerIsShown();
          }}
          visible={store.ui.leftDrawerIsShown}
          key={"dashboard-drawer"}
          bodyStyle={{
            padding: 0,
            paddingTop: 20,
          }}
        >
          <div
            style={{
              marginLeft: 0,
              paddingLeft: 0,
            }}
          >
            <Menu>
              <Menu.Item key="home">
                <Link to={LINKS.HOME}>
                  <HomeOutlined />
                  <span>Home</span>
                </Link>
              </Menu.Item>
              {store.authentication.userData.role !== "Retail" && (
                <Menu.Item key="membership">
                  <Link to={LINKS.MEMBERSHIP}>
                    <HomeOutlined />
                    <span>Membership</span>
                  </Link>
                </Menu.Item>
              )}
              {store.authentication.userData.role !== "Retail" && (
                <SubMenu
                  key="config"
                  icon={<HomeOutlined />}
                  title="Config"
                  style={{ backgroundColor: "#e3e8ee" }}
                >
                  <Menu.Item key="partner">
                    <Link to={LINKS.PARTNER}>
                      <HomeOutlined />
                      <span>Partner</span>
                    </Link>
                  </Menu.Item>
                  <Menu.Item key="commision">
                    <Link to={LINKS.PARTNER}>
                      <HomeOutlined />
                      <span>Commision</span>
                    </Link>
                  </Menu.Item>
                  <Menu.Item key="supplier">
                    <Link to={LINKS.PARTNER}>
                      <HomeOutlined />
                      <span>Supplier</span>
                    </Link>
                  </Menu.Item>
                </SubMenu>
              )}
              {store.authentication.userData.role !== "Retail" && (
                <Menu.Item key="product">
                  <Link to={LINKS.PRODUCT}>
                    <HomeOutlined />
                    <span>Product</span>
                  </Link>
                </Menu.Item>
              )}
              {store.authentication.userData.role === "Retail" && (
                <Menu.Item key="transaction">
                  <Link to={LINKS.TRANSACTION}>
                    <HomeOutlined />
                    <span>Transaction</span>
                  </Link>
                </Menu.Item>
              )}
              <Menu.Item key="profile">
                <Link to={LINKS.PROFILE}>
                  <UserOutlined />
                  <span>Profile</span>
                </Link>
              </Menu.Item>
              {/*<Menu.Item key="about">*/}
              {/*    <Link to={'/app/about'}>*/}
              {/*        <CalendarOutlined/>*/}
              {/*        <span>About</span>*/}
              {/*    </Link>*/}
              {/*</Menu.Item>*/}
              <Menu.Divider
                style={{ background: "transparent", paddingTop: 15 }}
              />
            </Menu>
          </div>
        </Drawer>
      )}

      <Layout
        className={"transparent"}
        style={{
          position: "relative",
          display: "block",
          paddingLeft: store.ui.mediaQuery.isDesktop ? 200 : 0,
          height: "100vh",
        }}
      >
        <Header
          theme={"light"}
          className={store.ui.mediaQuery.isMobile ? "shadow" : null}
          style={{
            height: store.ui.mediaQuery.isDesktop ? 24 : 35,
            // width: 'calc(100vw - 200px)',
            width: "100%",
            position: store.ui.mediaQuery.isDesktop ? "fixed" : "fixed",
            zIndex: 99,
            paddingLeft: store.ui.mediaQuery.isDesktop ? 14 : 0,
            paddingRight: store.ui.mediaQuery.isDesktop ? 14 : 0,
            backgroundColor: store.ui.mediaQuery.isMobile
              ? "#fff"
              : "transparent",
            maxWidth: store.ui.mediaQuery.isDesktop ? 1024 : 768,
            // minWidth: store.ui.mediaQuery.isDesktop ? 768 : 0,
            top: store.ui.mediaQuery.isMobile ? 0 : 12,
            /**/
          }}
        >
          {store.ui.mediaQuery.isMobile && (
            <div
              className={store.ui.mediaQuery.isMobile ? "shadow" : null}
              style={{
                top: 0,
                left: 0,
                paddingTop: 8,
                position: "relative",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "stretch",
                flexDirection: "column",
                // boxShadow: '0 7px 14px 0 rgba(60, 66, 87, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.05)'
              }}
            >
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between",
                  alignItems: "center",
                  height: "100%",
                  width: "100%",
                  paddingLeft: store.ui.mediaQuery.isMobile ? 10 : 20,
                  paddingRight: store.ui.mediaQuery.isMobile ? 0 : 20,
                  paddingBottom: 4,
                  marginTop: -5,
                }}
              >
                <Button
                  type="link"
                  icon={
                    <MenuOutlined
                      style={{
                        fontSize: "12px",
                        color: "#5b5b5b",
                        marginLeft: -10,
                      }}
                    />
                  }
                  onClick={() => {
                    store.ui.toggleLeftDrawerIsShown();
                  }}
                />
                <div
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "flex-start",
                    alignItems: "stretch",
                    padding: 0,
                    margin: 0,
                    paddingTop: 5,
                  }}
                >
                  {/*<img*/}
                  {/*    className={[classes.logoFull]}*/}
                  {/*    style={{*/}
                  {/*        maxHeight: 18,*/}
                  {/*        maxWidth: 75,*/}
                  {/*    }}*/}
                  {/*    src={parkirLogoFull}*/}
                  {/*/>*/}
                  {/*<Paragraph*/}
                  {/*    style={{*/}
                  {/*        margin: "-5px 0px 0px 2px",*/}
                  {/*        padding: 0,*/}
                  {/*        lineHeight: "18px",*/}
                  {/*        fontSize: 8,*/}
                  {/*        fontWeight: 800,*/}
                  {/*        color: "#8c8c8c",*/}
                  {/*        textAlign: "center",*/}
                  {/*    }}*/}
                  {/*>*/}
                  {/*    {store.authentication.userData.role || "Apps"}*/}
                  {/*</Paragraph>*/}
                </div>
                <Popover
                  className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
                  autoAdjustOverflow={true}
                  placement="bottomRight"
                  content={
                    <Menu
                      type={"line"}
                      inlineIndent={0}
                      theme="light"
                      style={{
                        backgroundColor: "transparent",
                        borderRightWidth: 0,
                      }}
                      mode="inline"
                    >
                      <Menu.Item>
                        <Link to={LINKS.PROFILE}>
                          <span>Profile</span>
                        </Link>
                      </Menu.Item>
                      <Menu.Item
                        onClick={() => {
                          store.authentication.logout();
                          history.push("/login");
                        }}
                      >
                        <span>Sign out</span>
                      </Menu.Item>
                    </Menu>
                  }
                  title={
                    <Text>
                      {store.user.data.username}
                      <Paragraph
                        style={{ fontWeight: 400 }}
                        type={"secondary-dark"}
                      >
                        {store.authentication.userData.username}
                      </Paragraph>
                    </Text>
                  }
                  trigger="click"
                  visible={clicked}
                  onVisibleChange={() => setClicked(!clicked)}
                >
                  <Button
                    size={"default"}
                    type={store.ui.mediaQuery.isDesktop ? "" : "link"}
                    style={{
                      marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10,
                    }}
                    icon={
                      store.ui.mediaQuery.isDesktop ? (
                        <UserOutlined style={{ fontSize: "13px" }} />
                      ) : (
                        <UserOutlined
                          style={{ fontSize: "13px", color: "#5b5b5b" }}
                        />
                      )
                    }
                  />
                </Popover>
              </div>
              <div
                style={{
                  borderTopWidth: 0.5,
                  borderTopColor: "#e3e3e3",
                  borderTopStyle: "solid",
                }}
              />
              {/*<BreadcumbComponent data={}/>*/}
            </div>
          )}

          {store.ui.mediaQuery.isDesktop && (
            <div
              className={["transparent"].join(" ")}
              style={{
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between",
                alignItems: "center",
                height: "100%",
                maxWidth: 1024,
                minWidth: 768,
                width: "calc(100vw - 220px)",
              }}
            >
              <div
                style={{
                  flexDirection: "row",
                  display: "flex",
                  justifyContent: "flex-start",
                  alignItems: "center",
                  width: "100%",
                }}
              ></div>
              <Popover
                className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
                autoAdjustOverflow={true}
                placement="bottomRight"
                content={
                  <Menu
                    type={"line"}
                    inlineIndent={0}
                    theme="light"
                    style={{
                      backgroundColor: "transparent",
                      borderRightWidth: 0,
                    }}
                    mode="inline"
                  >
                    <Menu.Item key={"profile"}>
                      <Link to={LINKS.PROFILE}>
                        <span>Profile</span>
                      </Link>
                    </Menu.Item>
                    <Menu.Item
                      key={"logout"}
                      onClick={() => {
                        store.authentication.logout();
                        history.push("/login");
                      }}
                    >
                      <span>Sign out</span>
                    </Menu.Item>
                  </Menu>
                }
                title={
                  <Text>
                    {store.user.data.email}{" "}
                    <Paragraph
                      style={{ fontWeight: 400 }}
                      type={"secondary-dark"}
                    >
                      {store.authentication.userData.username}
                    </Paragraph>
                  </Text>
                }
                trigger="click"
                visible={clicked}
                onVisibleChange={() => setClicked(!clicked)}
              >
                <Button
                  size={"default"}
                  type={store.ui.mediaQuery.isDesktop ? "" : "link"}
                  style={{
                    marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10,
                  }}
                  icon={
                    store.ui.mediaQuery.isDesktop ? (
                      <UserOutlined style={{ fontSize: "13px" }} />
                    ) : (
                      <UserOutlined
                        style={{ fontSize: "13px", color: "#5b5b5b" }}
                      />
                    )
                  }
                />
              </Popover>
            </div>
          )}
        </Header>

        <Layout
          className={["transparent"].join(" ")}
          tabIndex={"-1"}
          style={{
            zIndex: 0,
            display: "flex",
            // overflowX: store.ui.mediaQuery.isMobile ? 'auto' : "hidden",
            // paddingLeft: 8,
            // paddingRight: 8,
            //  width: 'calc(90vw - 220px)',
            height: "100%",
          }}
        >
          <Content
            className={["transparent"].join(" ")}
            style={{
              // maxHeight: 'calc(100vh - 98px)',
              // paddingBottom: 48,
              padding: 0,
              margin: 0,
              position: "relative",
              marginTop: store.ui.mediaQuery.isDesktop ? 43 : 37,
              // overflow: 'auto',
              overflowX: store.ui.mediaQuery.isMobile ? "auto" : "hidden",
              // minWidth: 768,
              maxWidth: 1024,
              // minWidth: 768,
              width: store.ui.mediaQuery.isDesktop
                ? "calc(100vw - 210px)"
                : "calc(100vw)",
              zIndex: 22,
              // height: `calc(100vh - ${store.ui.mediaQuery.isDesktop ? 78 : 71}px)`,
              height: `calc(100vh - ${
                store.ui.mediaQuery.isDesktop ? 43 : 37
              }px)`,
              // paddingLeft: 8,
              // paddingRight: 8
            }}
          >
            <AppRoute />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
});