import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Tabs,
    TabsProps,
    TabList,
    TabListProps,
    Tab,
    TabProps,
    TabPanel,
    TabPanelProps,
    resetIdCounter
} from "react-tabs";

resetIdCounter();

interface TestTabProps extends TabProps {}
interface TestTabListProps extends TabListProps {}
interface TestTabPanelProps extends TabPanelProps {}
interface TestTabsProps extends TabsProps {}

class TestApp extends React.Component {
    onSelect = (index: number, last: number, event: Event) => {
        console.log("selected tab: " + index.toString());
        console.log("last tab: " + last.toString());
        console.log("event: " + event.type);
    }

    render() {
        return React.createElement(Tabs, { onSelect: this.onSelect, selectedIndex: 1, defaultFocus: true, name: 'Tabs', autoFocus: true },
            React.createElement(TabList, { className: "test-class" },
                React.createElement(Tab, { disabled: true }, "Tab1"),
                React.createElement(Tab, { selectedClassName: "active" }, "Tab2"),
                React.createElement(Tab, {}, "Tab3")),
            React.createElement(TabPanel, {}, React.createElement("h2", {}, "Content1")),
            React.createElement(TabPanel, {}, React.createElement("h2", {}, "Content2")),
            React.createElement(TabPanel, {}, React.createElement("h2", {}, "Content3")));
    }
}

ReactDOM.render(
    React.createElement(TestApp, {}),
    document.getElementById("test-app")
);