import { css, cx } from "@linaria/core";
import {
  IconCamera,
  IconCube,
  IconDashboard,
  IconDownload,
  IconSettings,
} from "@queenjs/icons";
import { Avatar, Divider } from "ant-design-vue";
import { defineUI, queenApi } from "queenjs";
import { defineComponent } from "vue";
import { array, object } from "vue-types";
import Logo from "./Logo";
import { UserController } from "./UserController";
import dayjs from "dayjs";
import Payment from "../../Payment";
import { useAuth } from "@queenjs-modules/auth";

export default defineUI({
  props: {
    Controller: object<UserController>().isRequired,
  },

  setup(props) {
    const auth = useAuth();
    const footerOptions: TextListProps[] = [
      {
        label: "退出",
        icon: IconDownload,
        onClick: () => props.Controller.loginOut(),
      },
    ];
    const menuOptions = [
      {
        link: "/workbench/promotion",
        label: "我的作品",
        icon: IconDashboard,
        // suffix: "7",
      },
      {
        link: "/workbench/collection",
        label: "作品集",
        icon: IconCube,
        // suffix: "32",
      },
      {
        link: "/workbench/category",
        label: "我的分类",
        icon: IconCube,
        // suffix: "32",
      },
      {
        link: "/workstage/material",
        label: "我的素材",
        icon: IconCamera,
        // suffix: "32",
      },
      {
        link: "/settings",
        label: "个人资料",
        icon: IconSettings,
      },
    ];

    function showPayment() {
      queenApi.dialog(<Payment />, { width: "12rem" }, [auth]);
    }

    return () => {
      const { userInfo } = props.Controller.state;
      const  isSys = (userInfo.roles || []).indexOf("system") > -1;
    
      return (
        <div class={cx(rootStyles, "px-25px py-16px h-1/1 flex flex-col")}>
          <div>
            <Logo />
          </div>
          <div class="my-50px flex items-center">
            <Avatar size={76} src={userInfo.avatar} />
            <div class="ml-20px flex-1">
              <p class="mb-10px text-16px font-bold">{userInfo.name} {isSys?"(平台账号)":""}</p>
              <div
                class="text-12px text-gray cursor-pointer"
                style={{ color: "#E88B00" }}
                onClick={showPayment}
              >
                {userInfo.saas
                  ? "VIP 到期时间:" +
                    dayjs(userInfo.saas.Exp).format("YYYY.MM.DD")
                  : "免费版(限3个推广)"}
              </div>
            </div>
          </div>
          {/* <router-link to="/">
            <TextListItem
              option={{
                label: "资源中心",
                suffix: <span class="icon_new">new</span>,
                icon: (
                  <img
                    class="w-18px mr-10px"
                    src={require("@/assets/imgs/img-resource.png")}
                    alt=""
                  />
                ),
              }}
            />
          </router-link> */}
          <Divider class="!-mt-10px" />
          <div class="flex-1">
            {menuOptions?.map((option, index) => (
              <router-link to={option.link} key={index}>
                <TextListItem key={index} option={option} />
              </router-link>
            ))}
          </div>
          <div class="mb-30px">
            <TextList options={footerOptions} />
          </div>
        </div>
      );
    };
  },
});

const rootStyles = css`
  .icon_new {
    border-radius: 14px;
    padding: 5px 10px;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1;
    background: linear-gradient(90deg, #9788ff 0%, #7e6bff 100%);
    color: #fff;
  }
  .router-link-exact-active {
    display: block;
    border-radius: 4px;
    background-color: #414141;
    > div {
      color: @inf-text-color;
    }
  }
`;

type TextListProps = {
  label?: string;
  suffix?: any;
  icon?: any;
  link?: string;
  onClick?: () => void;
};

const TextList = defineComponent({
  props: {
    options: array<TextListProps>(),
  },
  setup(props) {
    return () => {
      return (
        <div>
          {props.options?.map((option, index) => (
            <TextListItem key={index} option={option} />
          ))}
        </div>
      );
    };
  },
});

const TextListItem = defineComponent({
  props: { option: object<TextListProps>() },
  setup(props) {
    return () => {
      const { option = {} } = props;
      return (
        <div
          class={cx("flex items-center justify-between", itemStyles)}
          onClick={() => option.onClick?.()}
        >
          {option.icon && <option.icon class="mr-8px text-20px" />}
          <div class="flex-1">{option.label}</div>
          {option.suffix && typeof option.suffix == "string" ? (
            <span>{option.suffix}</span>
          ) : (
            option.suffix
          )}
        </div>
      );
    };
  },
});

const itemStyles = css`
  margin-top: 10px;
  border-radius: 4px;
  padding: 10px 25px 10px 20px;
  color: @inf-text-sub-color;
  cursor: pointer;
  &:hover {
    background: #414141;
  }
`;