import {
  HomeOutlined,
  SettingOutlined,
  ApiOutlined,
  FolderOutlined,
  ClearOutlined,
  UserOutlined,
  CommentOutlined,
  AlertOutlined,
  UploadOutlined,
  ClockCircleTwoTone,
  PlusCircleTwoTone,
  ControlTwoTone,
  MessageTwoTone,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Menu } from "antd";
import React, { useState } from "react";
import { Input, Avatar } from "antd";
import { SearchOutlined } from "@ant-design/icons";

import "./Navbar.css";

import { Dialog, Portal, createOverlay, CloseButton } from "@chakra-ui/react";
import { PasswordInput } from "@/components/ui/password-input";

import { Input as ChakraInput, InputGroup, Box } from "@chakra-ui/react";

import { QRCode, Button } from "antd";
// import { PasswordInput } from "@/components/ui/password-input"

import { Tabs } from "antd";

import { Space } from "antd";

import { Flex } from "antd";

interface DialogProps {
  title: string;
  description?: string;
  content?: React.ReactNode;
}

const login_dialog = createOverlay<DialogProps>((props) => {
  const { ...rest } = props;
  return (
    <Dialog.Root {...rest} size={"xl"} placement="center">
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            <Dialog.CloseTrigger top="0" asChild>
              <CloseButton bg="bg" size="sm" />
            </Dialog.CloseTrigger>
            <Dialog.Body
              style={{
                paddingBottom: "10px",
              }}
            >
              <div
                style={{
                  display: "flex",
                  height: "100%",
                  minHeight: "400px",
                }}
              >
                <Dialog.Body
                  style={{
                    textAlign: "center",
                    maxWidth: "300px",
                    borderRight: "1px solid #eee",
                  }}
                >
                  <Dialog.Title>扫描二维码登录</Dialog.Title>
                  <Dialog.Body
                    style={{
                      marginTop: "30px",
                    }}
                  >
                    <QRCode
                      errorLevel="H"
                      size={200}
                      value="https://ant.design/"
                    />
                    <div
                      style={{
                        textAlign: "center",
                        color: "#999",
                        marginTop: "20px",
                      }}
                    >
                      使用APP扫码登录
                    </div>
                    <div
                      style={{
                        textAlign: "center",
                        color: "#999",
                        marginTop: "5px",
                      }}
                    >
                      扫描登录或者扫码下载APP
                    </div>
                  </Dialog.Body>
                </Dialog.Body>
                <div>
                  <Dialog.Body
                    style={{
                      textAlign: "center",
                    }}
                  >
                    <Tabs
                      defaultActiveKey="1"
                      centered
                      items={[
                        {
                          label: (
                            <span className="not-font-select">
                              账号密码登录
                            </span>
                          ),
                          key: "1",
                          children: (
                            <Box spaceY="-1px" marginTop="30px">
                              <InputGroup startElement="账号">
                                <ChakraInput
                                  ps="3.5em"
                                  pe="0"
                                  style={{
                                    borderRadius: "5px 5px 0 0px",
                                  }}
                                  css={{ "--focus-color": "#bff" }}
                                />
                              </InputGroup>

                              <Space.Compact style={{ width: "100%" }}>
                                <InputGroup startElement="密码" flex="1">
                                  <PasswordInput
                                    ps="3.5em"
                                    pe="0"
                                    style={{
                                      borderRadius: "0 0 0 5px",
                                      borderRight: "0",
                                    }}
                                    css={{ "--focus-color": "#bff" }}
                                  />
                                </InputGroup>
                                <Button
                                  color="default"
                                  variant="link"
                                  style={{
                                    height: "40px",
                                    borderRadius: "0 0 5px 0",
                                    border:
                                      "1px solid var(--chakra-colors-border)",
                                  }}
                                >
                                  忘记密码?
                                </Button>
                              </Space.Compact>

                              <Flex
                                gap="medium"
                                vertical={false}
                                justify="center"
                                style={{
                                  marginTop: "30px",
                                }}
                              >
                                <Button block size="large">
                                  登录
                                </Button>
                                <Button type="primary" block size="large">
                                  注册
                                </Button>
                              </Flex>
                            </Box>
                          ),
                        },
                        {
                          label: (
                            <span className="not-font-select">
                              邮箱验证码登录
                            </span>
                          ),
                          key: "2",
                          children: (
                            <Box spaceY="-1px" marginTop="30px">
                              <Space.Compact style={{ width: "100%" }}>
                                <InputGroup startElement="邮箱" flex="1">
                                  <ChakraInput
                                    placeholder="请输入邮箱号"
                                    ps="3.5em"
                                    pe="0"
                                    style={{
                                      borderRadius: "5px 0 0 0px",
                                    }}
                                    css={{ "--focus-color": "#bff" }}
                                  />
                                </InputGroup>
                                <Button
                                  color="default"
                                  variant="link"
                                  style={{
                                    height: "40px",
                                    borderRadius: "0 5px 0 0",
                                    border:
                                      "1px solid var(--chakra-colors-border)",
                                  }}
                                >
                                  获取验证码
                                </Button>
                              </Space.Compact>

                              <InputGroup startElement="验证码">
                                <ChakraInput
                                  placeholder="请输入验证码"
                                  ps="5em"
                                  pe="0"
                                  style={{
                                    borderRadius: "0 0 5px 5px",
                                  }}
                                  css={{ "--focus-color": "#bff" }}
                                />
                              </InputGroup>

                              <Flex
                                gap="medium"
                                vertical={false}
                                justify="center"
                                style={{
                                  marginTop: "30px",
                                }}
                              >
                                <Button
                                  size="large"
                                  type="primary"
                                  style={{
                                    padding: "0 60px",
                                  }}
                                >
                                  登录 / 注册
                                </Button>
                              </Flex>
                            </Box>
                          ),
                        },
                      ]}
                    />
                  </Dialog.Body>
                  <Dialog.Body>
                    <div
                      className="not-font-select"
                      style={{
                        textAlign: "center",
                        color: "#ccc",
                      }}
                    >
                      其他登录方式
                    </div>

                    <Flex
                      gap="medium"
                      vertical={false}
                      justify="center"
                      style={{
                        marginTop: "20px",
                        marginBottom: "30px",
                      }}
                    >
                      <Button color="default" variant="text">
                        <Avatar src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAb1BMVEUAAABMouVIn+NEn99MouVMouVMo+ZMouVKouRKouJMn+NMouZLouRLo+VMoeNMouZLoeVLoeVNn+RMouX///+83Pal0PL0+v6x1vRireiay/FXqOfS6Pl5uevH4vePxe+Ev+1utOrp9Pzp8/yEv+7XzqLPAAAAE3RSTlMA3yAQ74C/n2BQQK9wz5CPz7BwJ8NfpgAAAbNJREFUSMe1lutygjAQhTeEOyi2AQIC3t//GcvYqk3OYsh0+v1yMN+czc4mQBwyL5ONUDMiLsqc1iGzOFQGYZGu0KLZQkQSrNSQ6I2aGRqkpktxlXJQSc4LNsqJCBhPOCQwwXOa6PmbErxlNpJeVMqD6uWliqOfprPiyN5tcOp0PaObntnmo9hIAV39pFNA9BOogKb+RQN/h9+RCfzR1gbtQqSArtQmemAjUy4QI7GxBTy92qKGJfEshlgp0DO15srmhuIRFuX0Cc/2KO5hUUkF1xt3dxKKuUS3uCPBjA0w4rySwqYyDLCM+EqxVrd45UTtFm81ywlEuzkHXhyhOfY1DArfntg+jRMY/PB80CeODaLhHigpt7fYNSgeuvpgD7k0j9V4Gfbc6RjN7oRE1rCeejVo27vMD4/WFokynB33qUpnUYb+t5zg7+OhNYrVxx5PIzGRJ9ijniwxIC7y3DV3urZ9/DrDfQxvR793a+YnpvRk6+Nt6YXceRQq//rxgKb/h87/fVrtAmKQW2c/JfGkb0PDjBYJomUtMuJQTcRKDUmL0LLiDDWevCzie7LYJGXOWl/BnLhvbq/sWgAAAABJRU5ErkJggg==" />
                        QQ 登录
                      </Button>
                      <Button color="default" variant="text">
                        <Avatar src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAgVBMVEUAAABXu0BYt0BQt0BXu0BWu0BXu0BXu0BXu0BWukBWukBXvEBXu0BXvEBXvEBYukBVukBXu0BWt0BXukBXuEBXu0D////1+/Pq9+fV7s/A5rer3aBsw1jg89uBzHBiwEy14auL0Xug2ZOW1YeBzG93yGSW1YjL6sO14azL6cN2yGP3XpzOAAAAFXRSTlMA3yAQ78+/r5+AUI9w74BgYEBAkHDBb56KAAACF0lEQVRIx52W6XKDIBRGwT3GZmsRUXFP0vb9H7AKGS8aiCXnR0TCmU/gOoh0uJck8jEZwUGYXND/cOPggyz4CE//0HZgKeDIsdSA3Qs1Bk2XejLF7ckGe1fnOT7ZBDsaDxNiZ4Jna4Jnb7rgbeKrK7QnFuzBOxIrYrsJAth9iIdl/9CwLE0pv/elqfoegWpfXdAUYINW9GRkRIBWakBemiOVGRbpE1lpijwaPDANCxvCc8qBbcVF47vq5EQ1YjCK3nyXiXE3QqrpSseeu+jptc96XgWmHSGDEGtCmDHygpK5nUuRdr2MvvfNdMvzXCN+KVNk6RO0qOpr37fXJzFCwdzmT9532THZovmqFHxlF3/WcdWQGUsBI2g3K/G3WG3o4oEVsVqOK4RHaTpfaKkXCVsWzPTL65pPN7X4kxnEX6qIXS4mJqfOH5tVKSJWzJsiXqlcklxe5AI0yuL4RDUpiKkGphRrRFRK+lLk88AQSg4KXVC9TvwSRQ4MU5m1xZ2xlmnEm1LkrqeKTVbU5rcaNtJDCAWqCOutq90CpjiKMTFQZuuah/9Oo+h6ZtPkYTSxI0YKReWLtxFBpJ5bzjOasWYsoBp6HQSRW5R5tz4C4HS0PltjO/H05sH6iQDXtz0d3/94ANPes/9Asjd9572PwE8X6Tm+DPViZMQ5mLUDxGnVCFtqwDH0VlYQS22bcxIGIhn7UXLWWn+10s6FZo+4YQAAAABJRU5ErkJggg==" />
                        微信登录
                      </Button>
                      <Button color="default" variant="text">
                        <Avatar src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAh1BMVEUAAADXQDjTQDzaQzfcRTfbRDfcRDbcQzbbRDbbRDfcQzbaQzbbRDbbRDbaRDfcQzbbRDfaQjjaQjXcQzfYRDfbRDTbRDf////gW1D99PPtoZvyubT76Ob20M3pioLdT0Tvrajkc2n20c3rlo7mfnb0xcD43NrrlY7kcmniZ1343driZ1z0xMEgvW1iAAAAFnRSTlMAIBDf34Dv78+/n1BAj7CvcGBgkHBwDUc+aAAAAmpJREFUSMeVlueCqjAQRgOI0qy7m0YVsN297/98OwEdCUQ05w8WDt/MkIjEhJv8RIFHAS/c/CTkM9w4XFKN5ebwgeaDNWURObYa4s+oMWrG1MOruDV9w9o1eU5A37JwDN6CUksTPWsTPXvTRe89wXBCa2rB+ukd6By3K6ca8WcNVoyxLB26i0ex/mxgzRTiMlx990A6C09PZ6XKwXbpIyP6Fn4C8zKONHVYFrJ4tJWfoUMJ5k2PPBi0igHZrX8j4HVLITPXB7udeK1gHem9ziJjouTwQYmnhCCuxh5UhSJO9qKmWwxrTcZeyh5UpcyFyOH0Bi5SaYNNyG7qYeK95CttWUWlJn6PW5RsSgVtlyqxoEhEQs1rNEPrldf5cI8Qb+hxYRKlaVsSY4NZKqU81aynpQY0kTNF3pS4fsDFvTESx4Gi0b4vMqWKdl4UcHWukmSeZXnRV9Gb5VgcDucIJ3B11JbckSmKyXAC7V7I52hxI2WmyYYk0m7+Dbd8JR7boTYlbshOE9WBsYb+MglBZ6r4p8TxXL+Hi7zov2dCnY1N8v7ViIS4z21V9q3U7Ap9YkzOulnrLAkZLtYTA4f+CpYLHEjFgCMdtwhiTBGedT+D/NwtIHU2V3li4tE9iO5qaILQwvF4LNUtTLsr8InnTX6Pebfq8qopmup/V29W0CkRIaNISDmxJwLqNeEYHwG8repzltVpA/Ua8UmP61ErPHy2xnbiniBflg9WxA0sCnXJAMezadDSRM/aRM/eDMCb4n7Z/glE9rOhq5i8xPFfaz7GmdXIs9aw4O1qZIUxam9IdtuwS/aCaJcYrT+uh9kYccQkXQAAAABJRU5ErkJggg==" />
                        微博登录
                      </Button>
                    </Flex>
                  </Dialog.Body>
                </div>
              </div>
            </Dialog.Body>
            <Dialog.Body
              style={{
                paddingTop: "0px",
              }}
            >
              <div
                style={{
                  textAlign: "center",
                  color: "#ccc",
                }}
              >
                未注册过账号的手机号/邮箱，我们将自动帮你注册账号{" "}
              </div>
              <div
                style={{
                  textAlign: "center",
                  color: "#ccc",
                }}
              >
                登录或完成注册即代表你同意
                <Button color="primary" variant="link">
                  用户协议
                </Button>
                和
                <Button color="primary" variant="link">
                  隐私政策
                </Button>
              </div>
            </Dialog.Body>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  );
});

// login_dialog.open({});

const Navbar: React.FC = () => {
  const [current, setCurrent] = useState("mail");
  const [isLogin, setIsLogin] = useState(false);

  const items: MenuProps["items"] = [
    {
      label: "主页",
      key: "home",
      icon: <HomeOutlined />,
    },
    {
      label: "工具大全",
      key: "tools",
      icon: <ApiOutlined />,
    },
    {
      label: "文章资源",
      key: "articles",
      icon: <FolderOutlined />,
    },
    {
      label: "消息",
      key: "xx",
      icon: <CommentOutlined />,
      children: [
        {
          label: "回复我的",
          key: "xx1",
        },
        {
          label: "@我的",
          key: "xx2",
        },
        {
          label: "收到的赞",
          key: "xx3",
        },
        {
          label: "系统消息",
          key: "xx4",
        },
        {
          label: "我的消息",
          key: "xx5",
        },
      ],
    },
    {
      label: "bug反馈",
      key: "bug",
      icon: <AlertOutlined />,
    },
    {
      label: (
        <Input
          placeholder="请输入搜索内容"
          className="width_600 height_40 margin_3_0 margin_left_600"
          prefix={<SearchOutlined />}
        />
      ),
      key: "search",
      disabled: true,
      className: "right-align-container",
    },
    {
      label: (
        <span
          className="margin_0_20"
          onClick={() => {
            login_dialog.open({});
          }}
        >
          <Avatar size={40} icon={<UserOutlined />} className="margin_3_0" />
          <span className="height_40_center display_inline_block margin_0_10">
            用户: 10086
          </span>
        </span>
      ),
      key: "my",
      children: isLogin
        ? [
            {
              className: "width_300",
              type: "group",
              label: (
                <div className="height_40_center text_center">用户10086</div>
              ),
              children: [
                {
                  label: "个人中心",
                  key: "setting:1",
                  icon: <UserOutlined />,
                },
                {
                  label: "个人设置",
                  key: "setting:2",
                  icon: <SettingOutlined />,
                },

                {
                  label: "浏览历史",
                  key: "setting:3",
                  icon: <ClearOutlined />,
                },
                {
                  label: (
                    <div
                      style={{
                        borderBottom: "1px #eee solid",
                        height: "20px",
                      }}
                    ></div>
                  ),
                  disabled: true,
                  key: "divider",
                },
                {
                  label: "退出登录",
                  key: "setting:4",
                  icon: <UploadOutlined />,
                },
              ],
            },
          ]
        : [
            {
              label: (
                <div
                  className="width_300"
                  style={{
                    color: "#000",
                  }}
                >
                  登录后你可以:
                  <div>111</div>
                </div>
              ),
              key: "login",
              disabled: true,
            },
            {
              label: (
                <>
                  <MessageTwoTone
                    style={{
                      marginRight: "10px",
                    }}
                  />{" "}
                  你发布评论后,也可以收到别人的回复
                </>
              ),
              disabled: true,
            },
            {
              label: (
                <>
                  <ClockCircleTwoTone
                    style={{
                      marginRight: "10px",
                    }}
                  />{" "}
                  查看自己的历史浏览记录
                </>
              ),
              disabled: true,
            },
            {
              label: (
                <>
                  <ControlTwoTone
                    style={{
                      marginRight: "10px",
                    }}
                  />{" "}
                  收藏需要的工具和文章
                </>
              ),
              disabled: true,
            },
            {
              label: (
                <>
                  <PlusCircleTwoTone
                    style={{
                      marginRight: "10px",
                    }}
                  />{" "}
                  部分登录才可以使用的功能
                </>
              ),
              disabled: true,
            },
            {
              label: (
                <Button type="primary" block>
                  立即登录
                </Button>
              ),
              key: "divider",
              disabled: true,
            },
            {
              label: (
                <div style={{ textAlign: "center" }}>
                  首次登录?{" "}
                  <Button color="primary" variant="link">
                    立即注册
                  </Button>
                </div>
              ),
              disabled: true,
            },
          ],
      className: "right-align-container",
    },
  ];

  const onClick: MenuProps["onClick"] = (e) => {
    console.log("click ", e);
    setCurrent(e.key);

    if (e.key == "home") {
      login_dialog.open({});
    }
  };
  return (
    <div
      style={{
        borderBottom: "1px solid #eee",
        margin: "10px 10px",
      }}
    >
      <Menu
        onClick={onClick}
        selectedKeys={[current]}
        mode="horizontal"
        items={items}
      />
      <login_dialog.Viewport />
    </div>
  );
};

export default Navbar;