import React, { useState } from "react";
import { View } from "@tarojs/components";

import style from "./index.module.less";

interface Props {
  current: string;
  full?: boolean;
  tabStyle?: string;
  className?: string;
  list: {
    key: string;
    label: string | React.ReactChild;
    children?: React.ReactChild | React.ReactChild[];
  }[];
}

export default function Index({
  tabStyle = "card",
  current,
  full,
  list,
  className,
}: Props) {
  const [tabIndex, setTabIndex] = useState(current ?? list[0].key);

  const renderTabContent = () => {
    return (
      <View className="h-full flex flex-col overflow-hidden">
        {list.map((item) => {
          return (
            <View
              className={
                `${item.key === tabIndex ? 'block' : 'hidden'} flex flex-col h-full`
              }
            >
              {item.children}
            </View>
          );
        })}
      </View>
    );
  };

  if (tabStyle === "outline") {
    return (
      <View className="h-full flex flex-col  overflow-hidden">
        <View className={`${style.outlineTabButtons} ${className}`}>
          {list.map((item) => {
            return (
              <View
                key={item.key}
                className={`${
                  tabIndex === item.key ? style.outlineTabButtonActived : style.outlineTabButton
                }`}
                onClick={() => setTabIndex(item.key)}
              >
                {item.label}
              </View>
            );
          })}
        </View>
        {renderTabContent()}
      </View>
    );
  }

  return (
    <View className="w-full h-full flex flex-col  overflow-hidden">
      <View className={`flex items-center gap-8 ${className}`}>
        {list.map((item) => {
          return (
            <View
              key={item.key}
              className={`${tabIndex === item.key ? style.rounedButtonActived : style.rounedButton}`}
              onClick={() => setTabIndex(item.key)}
            >
              {item.label}
            </View>
          );
        })}
      </View>
      {renderTabContent()}
    </View>
  );
}
