import React, { useState, useReducer } from 'react';
import { Form, Input, Popover, Badge, Row, Col, Drawer, Empty, Button, Tag, Space, Typography, Image, Divider, Card } from 'antd';
import './index.less';

import {
  createFromIconfontCN,
  SearchOutlined,
  MenuUnfoldOutlined,
  AppstoreOutlined,
  RightOutlined,
} from '@ant-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1978197_pquh3rpy9n.js',
});

declare type getContainerFunc = () => HTMLElement;

export interface CheckboxOptionType {
  productlogo: React.ReactNode | string;
  productcode: string;
  productname: string;
}

export interface SearchOptionType {
  attribution: string;
  url: string;
  title: string;
}

interface TitleEventEntity {
  key: string;
  domEvent: Event;
}

interface pageOptionsTypes {
  title: string | React.ReactNode;
  num: Number | String;
  linkUrl: String;
}

export interface IProps {
  logoUrl: React.ReactNode | string;
  onSearch: (
    value: any,
    event?:
      | React.ChangeEvent<HTMLInputElement>
      | React.MouseEvent<HTMLElement>
      | React.KeyboardEvent<HTMLInputElement>,
  ) => void;
  getContainer?: string | HTMLElement | getContainerFunc | false;
  drawervisible?: boolean;
  onChangeVisible: (visible: boolean) => void;
  personals?: any;
  onChangeClient: (
    item: Object,
    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
  ) => void | undefined;
  authservicelist?: Array<CheckboxOptionType | string>;
  onTitleClick?: (e: TitleEventEntity) => void;
  authoptions?: any;
  searchlist?: Array<SearchOptionType>;
  exiturl?: string;
  pageOptions: Array<pageOptionsTypes>;
  onChangePage: (linkUrl: string) => void;
}

const Navigation: React.FC<IProps> = (props: IProps) => {
  const { Title, Text, Paragraph } = Typography;

  const [popoverVisible, setPopoverVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);
  const [value, setValue] = useState('');
  const [searchs, setSearchs] = useState(false);

  const errorUrl = 'data:image/png;base64,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';

  const {
    logoUrl,
    onSearch,
    drawervisible,
    onChangeVisible,
    personals,
    onChangeClient,
    authservicelist,
    onTitleClick,
    authoptions,
    searchlist,
    exiturl,
    pageOptions,
    onChangePage,
  } = props;

  const setVisible = async () => {
    if (drawervisible === true) setVisible2(false);
    onChangeVisible(!drawervisible);
  };

  const goToPage = async (item: any) => {
    onChangePage(item.linkUrl);
    if (drawervisible) await setVisible();
    setPopoverVisible(false);
  };

  return (
    <div className="nav-warp">
      <div className="nav-head">
        <Row gutter={10} wrap={false} justify="space-between">
          <Col flex="none">
            <Space size={10}>
              <a onClick={setVisible} className="nav-menu-btn">
                <MenuUnfoldOutlined
                  style={{ fontSize: '24px', color: '#afafaf' }}
                />
              </a>
              {logoUrl ? <div className="nav-logo">{logoUrl}</div> : null}
            </Space>
          </Col>
          <Col flex="none">
            <Space size={30} className="nav-right">
              <div style={{ position: 'relative' }}>
                <Input
                  // onPressEnter={e => onSearch(e)}
                  // onFocus={() => setSearchs(true)}
                  // onBlur={() => setSearchs(false)}
                  style={{ width: '200px' }}
                  suffix={<SearchOutlined />}
                  value={value}
                  onChange={e => setValue(e.target.value)}
                />
              </div>
              {(personals?.urllist ?? []).map((item: any, index?: number) => {
                return (
                  <Badge key={index} count={0} size="small">
                    <a
                      onClick={() => onChangePage(item?.url)}
                      className="nav-btn"
                    >
                      {item.title}
                    </a>
                  </Badge>
                );
              })}
              <Popover
                open={popoverVisible}
                onOpenChange={open => setPopoverVisible(open)}
                content={
                  personals ? (
                    <Space
                      size={10}
                      direction="vertical"
                      style={{ width: '230px' }}
                    >
                      <Row gutter={[10, 10]} wrap={false} align="top">
                        <Col flex="none">
                          <Image
                            width={43}
                            height={43}
                            src={personals?.headimg ?? ''}
                            preview={false}
                            fallback={errorUrl}
                            style={{ borderRadius: 100 }}
                          />
                        </Col>
                        <Col flex="auto">
                          <Space
                            size={3}
                            direction="vertical"
                            style={{ width: '100%' }}
                          >
                            <Row gutter={0} wrap={false} align="top">
                              <Col flex="none">{personals?.username ?? ''}</Col>
                              <Col flex="auto">
                                <Paragraph
                                  ellipsis={{ rows: 1 }}
                                  style={{ margin: 0, color: '#999' }}
                                >
                                  【{personals?.nowclient?.clientname ?? ''}】
                                </Paragraph>
                              </Col>
                            </Row>
                            <Tag
                              color={personals.isauth === '0' ? 'red' : 'green'}
                              style={{ margin: 0 }}
                            >{`${
                              personals.isauth === '0' ? '未' : '已'
                            }实名认证`}</Tag>
                          </Space>
                        </Col>
                      </Row>
                      <Divider type="horizontal" dashed style={{ margin: 0 }} />
                      <Row
                        gutter={5}
                        wrap={false}
                        align="middle"
                        style={{ fontSize: 13 }}
                      >
                        <Col flex="auto">
                          <Paragraph
                            ellipsis={{ rows: 1, tooltip: true }}
                            style={{ margin: 0, color: '#666' }}
                          >
                            {personals?.nowclient?.dblist[0]?.dbaccountname ??
                              ''}
                          </Paragraph>
                        </Col>
                        <Col flex="none">
                          <a
                            onClick={e => {
                              onChangeClient(personals.nowclient, e);
                              if (drawervisible) setVisible();
                              setPopoverVisible(false);
                            }}
                            style={{ userSelect: 'none' }}
                          >
                            切换
                          </a>
                        </Col>
                      </Row>
                      {pageOptions.length > 0 && (
                        <>
                          <Divider
                            type="horizontal"
                            dashed
                            style={{ margin: 0 }}
                          />
                          <Row gutter={[10, 5]}>
                            {pageOptions.map((item: any, index: any) => {
                              return (
                                <Col span={12} key={index}>
                                  <Button
                                    onClick={goToPage.bind(this, item)}
                                    type="text"
                                    size="small"
                                    block
                                  >
                                    {item.title}
                                  </Button>
                                </Col>
                              );
                            })}
                          </Row>
                        </>
                      )}
                      <Divider type="horizontal" dashed style={{ margin: 0 }} />
                      <div style={{ color: '#999', textAlign: 'center' }}>
                        上次登录时间：{personals?.lastlogintime ?? ''}
                      </div>
                      {exiturl && (
                        <Button
                          onClick={() => {
                            setPopoverVisible(false);
                            window.location.href = exiturl;
                          }}
                          type="primary"
                          block
                          disabled={exiturl == ''}
                        >
                          退出登录
                        </Button>
                      )}
                    </Space>
                  ) : null
                }
                placement="bottomRight"
              >
                <div className="personal">
                  <Image
                    width={30}
                    height={30}
                    src={personals?.headimg ?? ''}
                    preview={false}
                    fallback={errorUrl}
                    style={{ borderRadius: 100, border: '1px solid #adb0b8' }}
                  />
                </div>
              </Popover>
            </Space>
          </Col>
        </Row>
      </div>
      <Drawer
        title={null}
        placement="left"
        closable={false}
        onClose={setVisible}
        open={drawervisible}
        getContainer={false}
        bodyStyle={{ height: '100%', padding: 0, display: 'flex', flexDirection: 'row' }}
      >
        <div className="menu-auto-list">
          <div className="service-list-btn">
            <Row gutter={10} wrap={false} align="middle" style={{ height: "100%" }}>
              <Col flex="none">
                <AppstoreOutlined style={{ fontSize: 14 }} />
              </Col>
              <Col flex="auto">
                <Text strong style={{ margin: "0px" }}>产品与服务</Text>
              </Col>
              <Col flex="none">
                <RightOutlined />
              </Col>
            </Row>
          </div>
          <div style={{ flex: 1, overflow: "hidden" }}>
            {
              (authservicelist ?? []).length > 0 ? (
                <div className="menu-auto-box">
                  <ul className="menu-box">
                    {
                      (authservicelist ?? []).map((item: any) => {
                        return (
                          <li onClick={onTitleClick?.bind(null, item)} key={item.productcode}>
                            <Image
                              width={20}
                              height={20}
                              src={item.productlogo}
                              preview={false}
                              fallback={errorUrl}
                              style={{ display: 'flex' }}
                            />
                            <div style={{ flex: 1, overflow: 'hidden' }}>
                              <Paragraph ellipsis={{ rows: 1 }} style={{ margin: 0 }}>
                                {item.productname}
                              </Paragraph>
                            </div>
                          </li>
                        );
                      })
                    }
                  </ul>
                </div>
              ) : null
            }
          </div>
        </div>
        <div className={`divs show`}>
          <div className="auto_box_list">
            {
              <div className="box-wrapper">
                {authoptions.length === 0 ? (
                  <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                    <Empty />
                  </div>
                ) : (
                  authoptions.map((item: any, index: any) => {
                    return (
                      <div key={index} style={{ marginTop: index == 0 ? 0 : 16 }} className="box-item" >
                        <Card
                          title={<Text strong>{item.title}</Text>}
                          bordered={false}
                          size="small"
                          type="inner"
                          style={{ display: 'flex', flexDirection: 'column', gap: 10 }}
                          headStyle={{ border: 'none' }}
                          bodyStyle={{ padding: 0 }}
                        >
                          {item.children.map((subs: any, sub_index: any) => {
                            let isUse: Boolean = false;
                            if (subs?.isopen == '1' && subs?.isauthorization == '1')isUse = true;
                            return (
                              <a
                                key={sub_index}
                                onClick={onTitleClick?.bind(null, subs)}
                                className="auto_item_btn"
                                style={{ pointerEvents: isUse ? 'auto' : 'none' }}
                              >
                                <Paragraph
                                  ellipsis={{ rows: 1 }}
                                  style={{ margin: 0, color: isUse ? '#666' : '#c6c6c6', userSelect: "none" }}
                                >
                                  {subs.title}
                                </Paragraph>
                              </a>
                            );
                          })}
                        </Card>
                      </div>
                    );
                  })
                )}
              </div>
            }
          </div>
        </div>
      </Drawer>
    </div>
  );
};

export default Navigation;