import { css } from "@linaria/core";
import { Menu } from "ant-design-vue";

import { useCategory } from "@/modules";
import { defineComponent } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  emits: ["change"],
  setup(props, { emit }) {
    const router = useRouter();
    const categoryStore = useCategory();
    const MenuRender = (item: CategoryItem) => {
      if (item.children) {
        return (
          <Menu.SubMenu key={item._id} title={item.name}>
            {item.children.map((subItem: any) => {
              return (
                <Menu.Item key={`/detail/${subItem._id}`}>
                  <router-link to={`/detail/${subItem._id}`}>
                    {subItem.name}
                  </router-link>
                </Menu.Item>
              );
            })}
          </Menu.SubMenu>
        );
      } else {
        return (
          <Menu.Item key={`/detail/${item._id}`}>
            <router-link to={`/detail/${item._id}`}>{item.name}</router-link>
          </Menu.Item>
        );
      }
    };
    return () => (
      <div class={MenuRoot}>
        <Menu
          mode="inline"
          inlineIndent={12}
          selectedKeys={[router.currentRoute.value.path]}
          onClick={() => {
            emit("change");
          }}
        >
          {categoryStore.categoryTree.map((item: any) => {
            return MenuRender(item);
          })}
        </Menu>
      </div>
    );
  },
});
const MenuRoot = css`
  .ant-menu {
    font-size: 16px;
    color: #333;
    &.ant-menu-inline {
      border-right: none;
      .ant-menu-item {
        &::after {
          display: none;
        }
        a {
          &:hover {
            color: #333;
          }
        }
      }
      .ant-menu-submenu-title {
        &:hover {
          color: #333;
        }
      }
      .ant-menu-submenu {
        &:hover {
          & > .ant-menu-submenu-title {
            color: #333;
            & > .ant-menu-submenu-arrow {
              color: #333;
            }
          }
        }
        &.ant-menu-submenu-selected {
          color: var(--vt-c-primary);
          .ant-menu-submenu-title {
            color: var(--vt-c-primary);
            .ant-menu-submenu-arrow {
              color: var(--vt-c-primary);
            }
          }
        }
      }
    }
    .ant-menu-item {
      &:hover {
        color: #333;
      }
      &.ant-menu-item-selected {
        background-color: var(--vt-c-primary);
        a {
          color: #fff;
          &:hover {
            color: #fff;
          }
        }
      }
    }

    .ant-menu-sub {
      &.ant-menu-inline {
        background-color: #fff;
      }
    }
  }

  a {
    display: block;
  }
`;
