import React from "react";
import {
  Tabs,
  TabPanel,
  ContentView,
  Card,
  Text,
  ExternalLink,
} from "@tencent/tea-component";

export default function ContentViewWithTabsExample() {
  const tabs = [
    { id: "basic", label: "基本信息" },
    { id: "network", label: "弹性网卡" },
    { id: "monitor", label: "监控信息" },
    { id: "sg", label: "安全组", disabled: true },
    { id: "oplog", label: "操作日志" },
  ];

  return (
    <MockLayout>
      <ContentView>
        <ContentView.Header
          showBackButton
          onBackButtonClick={console.log}
          title="内容标题"
          subtitle={
            <>
              说明文字 <Text theme="label">带颜色说明文字</Text>
            </>
          }
          operation={<ExternalLink weak>内容帮助</ExternalLink>}
        />
        <ContentView.Body>
          <Tabs ceiling animated={false} tabs={tabs}>
            <TabPanel id="basic">
              <Card>
                <Card.Body>基本信息</Card.Body>
              </Card>
            </TabPanel>
            <TabPanel id="network">
              <Card>
                <Card.Body>弹性网卡</Card.Body>
              </Card>
            </TabPanel>
            <TabPanel id="monitor">
              <Card>
                <Card.Body>监控信息</Card.Body>
              </Card>
            </TabPanel>
            <TabPanel id="oplog">
              <Card>
                <Card.Body>操作日志</Card.Body>
              </Card>
            </TabPanel>
          </Tabs>
        </ContentView.Body>
      </ContentView>
    </MockLayout>
  );
}

/**
 * 模拟控制台布局，在控制台使用的时候无需这部分，只要保留 ContentView 即可
 */
function MockLayout({ children }) {
  return (
    <div style={{ height: 340, position: "relative" }}>
      <header style={{ height: 40, background: "#262626" }} />
      <div
        className="container"
        style={{
          position: "absolute",
          top: 40,
          right: 0,
          bottom: 0,
          left: 0,
        }}
      >
        <aside
          style={{ float: "left", height: 300, width: 200, background: "#333" }}
        />
        <main
          style={{
            position: "absolute",
            top: 0,
            right: 0,
            bottom: 0,
            left: 200,
          }}
        >
          {children}
        </main>
      </div>
      <div style={{ clear: "left" }} />
    </div>
  );
}