import {
  ProductOutlined,
  ClockCircleOutlined,
  MenuOutlined,
  AppstoreOutlined,
} from "@ant-design/icons";
import type { ProSettings } from "@ant-design/pro-components";
import {
  PageContainer,
  ProCard,
  ProConfigProvider,
  ProLayout,
  AppListProps,
} from "@ant-design/pro-components";
import { css } from "@emotion/css";
import { Space, Input, Button, Row, Col, Card, ConfigProvider, Divider } from "antd";
import React, { useState } from "react";
import { history } from 'umi';
import logo from "@/assets/logo.png";
import { Icon } from "umi";

const MenuCard = () => {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
      }}
    >
      <Divider
        style={{
          height: "1.5em",
        }}
        type="vertical"
      />
    </div>
  );
};

const basicGraph = [
  {
    id: "1",
    title: "流程图",
    subtitle: "图形化表单方式",
    color: "#dfecff",
    icon: <Icon icon="local:flow"/>,
    path: "/flow",
  },
  {
    id: "2",
    title: "思维导图",
    subtitle: "结构化表单方式",
    color: "#dff4ea",
    icon: <Icon icon="local:mind"/>,
    path: "/mindmap",
  },
];

const appList = [
  {
    id: "1",
    title: "UML",
    icon: <Icon icon="local:uml"/>,
  },
  {
    id: "2",
    title: "E-R图",
    icon: <Icon icon="local:er"/>,
  },
  {
    id: "3",
    title: "泳道图",
    icon: <Icon icon="local:swimlane"/>,
  },
  {
    id: "4",
    title: "BPMN",
    icon: <Icon icon="local:bpmn"/>,
  },
  {
    id: "5",
    title: "韦恩图",
    icon: <Icon icon="local:we"/>,
  },
  {
    id: "6",
    title: "网络拓扑图",
    icon: <Icon icon="local:net"/>,
  },
];

const handleMenuClick = (item: any) => {
  console.log("click", item);
  history.push(item.path);
};

const renderBasicItem = (props: {
  title: string;
  subtitle: string;
  color: string;
  id: string;
  icon: React.ReactNode;
}) => {
  return (
    <div
      key={props.id}
      className={css`
        width: 136px;
        height: 60px;
        padding: 8px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-top: 8px;
        background: ${props.color + "70"};
        &:hover {
          background: ${props.color};
        }
      `}
      onClick={() => handleMenuClick(props)}
    >
      <span className="w-32px h-33px">
        {props.icon}
      </span>
      <div className="flex flex-col justify-center ml-4px">
        <div className="text-14px">{props.title}</div>
        <div className="text-12px text-#9aa5b8">{props.subtitle}</div>
      </div>
    </div>
  );
};

const renderProItem = (props: { id: string; title: string; icon: React.ReactNode }) => {
  return (
    <div
      key={props.id}
      className="w-66px h-70px flex flex-col items-center justify-center mt-8px rounded-lg hover:bg-#f3f5f9 cursor-pointer"
      onClick={() => handleMenuClick(props)}
    >
      {props.icon}
      <span className="text-12px">{props.title}</span>
    </div>
  );
};

const renderAppList = (_props: AppListProps) => {
  return (
    <div className="w-460px">
      <div className="color-#6c7d8f text-xs">基础图形</div>
      <Space>{basicGraph.map((item) => renderBasicItem(item))}</Space>
      <div className="color-#6c7d8f text-xs mt-8px">专业图形</div>
      <Space>{appList.map((item) => renderProItem(item))}</Space>
    </div>
  );
};

export default () => {
  const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({
    fixSiderbar: false,
    layout: "mix",
    splitMenus: true,
  });

  const [pathname, setPathname] = useState("/");
  if (typeof document === "undefined") {
    return <div />;
  }

  const handleToEdit = () => {
    history.push('/flow')
  }
  
  return (
    <div
      id="test-pro-layout"
      style={{
        height: "100vh",
        overflow: "auto",
      }}
    >
      <ProConfigProvider hashed={false}>
        <ConfigProvider
          getTargetContainer={() => {
            return document.getElementById("test-pro-layout") || document.body;
          }}
        >
          <ProLayout
            prefixCls="shalu"
            logo={logo}
            title="系统设计"
            bgLayoutImgList={[
              {
                src: "https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png",
                left: 85,
                bottom: 100,
                height: "303px",
              },
              {
                src: "https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png",
                bottom: -68,
                right: -45,
                height: "303px",
              },
              {
                src: "https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png",
                bottom: 0,
                left: 0,
                width: "331px",
              },
            ]}
            route={{
              path: "/",
              routes: [
                {
                  path: "/welcome",
                  name: "最近",
                  icon: <ClockCircleOutlined />,
                },
                {
                  path: "/flow",
                  name: "模版",
                  icon: <ProductOutlined />,
                },
              ],
            }}
            appList={[
              {
                icon: "",
                title: "应用占位",
              },
            ]}
            appListRender={renderAppList}
            location={{
              pathname,
            }}
            token={{
              header: {
                colorBgMenuItemSelected: "rgba(0,0,0,0.04)",
              },
            }}
            siderMenuType="group"
            menu={{
              collapsedShowGroupTitle: true,
            }}
            actionsRender={(props) => {
              if (props.isMobile) return [];
              if (typeof window === "undefined") return [];
              return [
              ];
            }}
            headerTitleRender={(logo, title, _) => {
              const defaultDom = (
                <a>
                  {logo}
                  {title}
                </a>
              );
              if (typeof window === "undefined") return defaultDom;
              if (document.body.clientWidth < 1400) {
                return defaultDom;
              }
              if (_.isMobile) return defaultDom;
              return (
                <>
                  {defaultDom}
                  <MenuCard />
                </>
              );
            }}
            menuItemRender={(item, dom) => (
              <div
                onClick={() => {
                  setPathname(item.path || "/welcome");
                }}
              >
                {dom}
              </div>
            )}
            {...settings}
          >
            <PageContainer
              extra={[
                <Button key="1" onClick={() => {}} icon={false ? <MenuOutlined/> : <AppstoreOutlined/>}/>,
              ]}
              subTitle="流程设计器"
              footer={[]}
            >
              <ProCard
                style={{
                  height: "calc(100vh - 140px)",
                  minHeight: 800,
                }}
              >
                <Row gutter={[8, 16]}>
                  {new Array(10).fill(0).map((item) => {
                    return (
                      <Col xs={8} sm={8} md={6} lg={6} xl={4} xxl={3}>
                        <Card
                          hoverable
                          bordered
                          cover={
                            <img
                              style={{height: 200, objectFit: 'cover'}}
                              alt="example"
                              src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                            />
                          }
                          onClick={() => handleToEdit()}
                        >
                          <Card.Meta
                            title={
                              <>
                                xx流程图
                              </>
                            }
                            description="更新于：2024.09.06"
                          />
                        </Card>
                      </Col>
                    );
                  })}
                </Row>
              </ProCard>
            </PageContainer>
          </ProLayout>
        </ConfigProvider>
      </ProConfigProvider>
    </div>
  );
};
