import { css, cx } from "@linaria/core";
import { Layout } from "ant-design-vue";
import Left from "./LeftContent";
import { defineUI } from "queenjs";
import { UserController } from "./UserController";
import { object } from "vue-types";

export default defineUI({
  props: {
    Controller: object<UserController>().isRequired,
  },
  slots: {
    Left,
  },
  setup(props, { slots }) {
    return () => {
      return (
        <Layout class={cx("!h-100vh flex", rootStyles)}>
          <Layout.Sider
            class="scrollbar !min-w-300px xl:(!min-w-320px) 2xl:(!min-w-380px) border-right !bg-transparent overflow-y-auto"
            theme="light"
          >
            <slots.Left Controller={props.Controller} />
          </Layout.Sider>
          <Layout.Content class="page_container scrollbar flex-1 my-20px rounded-20px p-50px overflow-y-auto">
            <router-view></router-view>
          </Layout.Content>
        </Layout>
      );
    };
  },
});

const rootStyles = css`
  background-color: @inf-layout-bg;
  .page_container {
    background-color: @inf-modal-bg;
  }
`;
