import * as React from "react";
import { useState, useEffect, useCallback } from "react";
import { Text, View, TouchableOpacity, ViewStyle } from "react-native";
import { style } from "./style";
import { useSiteSettings } from "../../providers/site";

interface Tab {
  id: string;
  title: string;
  content: React.ReactNode;
}

interface TabsProps {
  items: Tab[];
  contentStyle?: ViewStyle;
  onSetActiveTab: (tab: string) => void;
  activeTab: any;
}

export const Tabs = ({
  items,
  contentStyle,
  onSetActiveTab,
  activeTab,
}: TabsProps) => {
  const { style: siteStyle } = useSiteSettings();

  const onTabItemPress = useCallback(
    (id: string) => () => {
      onSetActiveTab(id);
    },
    [items]
  );

  return (
    <>
      <View style={style.container}>
        {items.map(({ title, id }) => (
          <TouchableOpacity
            key={id}
            onPress={onTabItemPress(id)}
            style={{
              ...style.item,
              ...(activeTab === id
                ? { borderBottomColor: siteStyle.active_color }
                : {}),
            }}
          >
            <Text>{title}</Text>
          </TouchableOpacity>
        ))}
      </View>
      <View style={contentStyle}>
        {items.map(({ content, id }) =>
          activeTab === id ? (
            <React.Fragment key={id}>{content}</React.Fragment>
          ) : null
        )}
      </View>
    </>
  );
};