import {
  Component, h, useEvent, useProp, FunctionalComponent,
} from "atomico";
import "../kun-loading/kun-loading";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

export interface TabMenu {
  key: string;
    name: string;
    selected: boolean;
}

const style = `
    .horizontal {
        display: flex;
        flex-direction: row;
    }
    
    .mt-18 {
        margin-top: 24px
    }
    .vertical {
        display:flex;
        flex-direction:column;
    }
    `;

const WebComponent1: FunctionalComponent = () => {
  const [tabs] = useProp<TabMenu[]>("tabs");
  const onClickTab = useEvent("MyTab", {
    bubbles: true,
    composed: true,
  });

  const clickD = (name: string): void => {
    onClickTab({ key: name });
  };

  return (
    <host shadowDom>
      <style>{style}</style>
      <div className="vertical">
        <div className="flex inline-flex justify-start">
          {
                        tabs.map((tab) => (
                          <kun-tab
                            key={tab.key}
                            selected={tab.selected}
                            message={tab.name}
                            onclick={() => clickD(tab.key)}
                          />
                        ))
                    }
        </div>
        <div className="mt-18">
          <slot />
        </div>
      </div>
    </host>
  );
};

WebComponent1.props = {
  tabs: {
    type: Array,
    value: [
      {
        key: "learning",
        name: "正在学习",
        selected: true,
      },
      {
        key: "plan",
        name: "学习计划",
        selected: false,
      },
    ],
  },
};

export default getComponentOrDefine("kun-tabs", WebComponent1);
