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

export default defineComponent({
  setup() {
    const auth = useAuth();

    const footerOptions: TextListProps[] = [
      {
        label: "退出",
        icon: IconDownload,
        onClick: auth.actions.logout,
      },
    ];
    const menuOptions = [
      {
        link: "/workbench/promotion",
        label: "我的推广",
        icon: IconDashboard,
        // suffix: "7",
      },
      {
        link: "/workstage/material",
        label: "我的素材",
        icon: IconCamera,
        // suffix: "32",
      },
      {
        link: "/settings",
        label: "设置",
        icon: IconSettings,
      },
    ];
    return () => {
      const { userInfo } = auth.store;

      return (
        <div class={cx(rootStyles, "p-30px h-1/1 flex flex-col")}>
          <div class="mt-20px">
            <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}</p>
              <div class="text-12px text-gray">
                {userInfo.desc || "这个人很懒，什么都没留下..."}
              </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 />
          <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;
  }
`;