import { cx } from "@linaria/core";
import { Button } from "ant-design-vue";
import { defineUI } from "queenjs";
import { any } from "vue-types";
import { BtnNames, MaterialController, TabNames } from "../../../../modules/resource/controllers/MaterialController";

export default defineUI({
  
  props: {
    Controller: any<MaterialController>().isRequired,
  },
  setup(props) {
    return () => {
      const state = props.Controller.state;

      return (
            <div class="flex items-center justify-between mt-20px">
            <div class="filter space-x-60px">
              {state.tabs.map((d) => (
                <span
                  key={d}
                  onClick={() => props.Controller.switchTab(d)}
                  class={cx(
                        state.currTab == d && "active",
                       "cursor-pointer btn_tab"
                    )}
                >
                  {TabNames[d as "video"]}
                </span>
              ))}
            </div>
            <div>
              {
                state.btns.map((name, index)=>
                    <Button
                        ghost
                        key={name}
                        type="primary"
                        class={"primary" + (index > 0 ? " ml-25px" : "")}
                        onClick={()=>props.Controller.onBtnClick(name)}
                  >
                     {BtnNames[name as "video"]}
                  </Button>
                )
              }
            </div>
          </div>
      );
    };
  },
});

